Today’s topic, take a look is not very surprised!

What the hell did React get married?

Don’t panic! React theme color. React theme color.

Create the React project

First, use the React scaffolding to create a React project: NPX create-react-app project. After the project is created, the directory will look like the following:

A simple project directory, seems to be nothing. But the problem is here, how to start with the configuration of the theme, worth our thinking.

Here I recommend using craco in ANTD to add the react project configuration file, rather than using NPM Run eject to restore the configuration file. Specific operations are as follows:

  • Install CrACO Installation directive NPM install@craco /craco

  • Add a new file craco.config.js to the project directory

  • Write the following in craco.config.js

    module.exports = {

    ​};

Configure the topic

The next step is to configure the React theme.

Here we use less to define the theme variable, so we need to install less less-Loader, and there is a module that is not forgotten, which is the bridge between Craco and Less.

craco-less

npm i less less-loader craco-less
Copy the code

Then configure the theme in craco.config.js:

//craco.config.js
const CracoLessPlugin = require('craco-less');

​module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
            lessOptions: {
              modifyVars: { '@primary-color': '#c63923','@gougou-color':'#81a6e9' },
              javascriptEnabled: true,
            }
          }
      }
    }
  ]
};
Copy the code

Note the modifyVars attribute in lessOptions, which is used to define theme variables. Here we have added two theme headings, @promary-color and @gougou-color.

We changed app.css to app.less under SRC in the project and wrote one in app.js

< H3 > Check the front end world </h3>Copy the code

Also write a style code in app.less.

// app. less h3{color: @gougou-color; }Copy the code

Pay attention to

Once all the work is ready, you cannot start the directive immediately; instead, you modify the start directive in package.json.

//package.json
"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  },
Copy the code

At this point, the configuration of the entire topic is complete, and NPM start starts the service. You can see that the theme color is displayed normally on the page.