0

I am trying to configure antd theme in react-boilerplate. I saw the issue 2027 in react-boilerplate repo. This is exactly what I want but I tried the given configuration in the accepted answer and it doesn't work for me.

In vanilla react-boilerplate repo, I installed antd. In the HomePage (index.js), I added a button, checkbox as

<Button type="primary">Primary</Button>
<Checkbox onChange={onChange}>Checkbox</Checkbox>

My webpack.base.babel.js looks like

const path = require('path');
const fs = require('fs');
const lessToJs = require('less-vars-to-js');
const themeVariables = lessToJs(fs.readFileSync(path.join(__dirname, './../../app/theme.less'), 'utf8'));

and one of the rule is

      {
        test: /\.less$/,
        include: /node_modules/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'less-loader',
            options: {
              modifyVars: themeVariables,
            },
          },
        ],
      },

The theme.less file is

@ant-prefix: ant;

@primary-color: #ff0000;
@btn-primary-color: #ff0000;
@checkbox-color: #ff0000;
@checkbox-check-color: #ff0000;

I tried overriding any possible colour in Button or Checkbox but couldn't get the theme colour changed.

Is there something I am missing? I have been stuck at this point from a long time. Any suggestion would be of great help.

Sood
  • 121
  • 1
  • 2
  • 14
  • I have been working with react and antd for almost 2 years. Please check this boilerplate https://github.com/shreyansRS/react-redux-antd this will help you to override antd's theme variables. File "config-overrides.js" line no. 11 & 12 – Shreyans Shrivastav Apr 15 '19 at 12:47

1 Answers1

-1

Trying importing ant styles to your index.js where you're applying the styles to the entire app.

Just add the following import

import 'antd/dist/antd.less';

For more information you can follow antd documentation

Ayesha Iftikhar
  • 1,028
  • 2
  • 11
  • 27