DocSpring / craco-antd

A craco plugin to use Ant Design with create-react-app
MIT License
234 stars 49 forks source link

customize theme via option or antd.customize.less not work #8

Closed azulkipli closed 5 years ago

azulkipli commented 5 years ago

Hi, I need help. Why customize theme not work as expected? Am I missing some configuration? I have configured craco.config.js as seen as below screen shot 2018-12-22 at 13 05 39

and my package.json

{
  "name": "resist",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^3.2.2",
    "antd": "^3.11.2",
    "craco-antd": "^1.9.3",
    "craco-preact": "^1.1.0",
    "preact": "^8.3.1",
    "preact-compat": "^3.18.4",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-hot-loader": "^4.6.3",
    "react-scripts": "2.1.1",
    "unistore": "^3.1.0"
  },
  "scripts": {
    "start": "nodemon -w ./antd.customize.less --exec 'craco start'",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "nodemon": "^1.18.9"
  }
}
ndbroadbent commented 5 years ago

Hi, your configuration looks fine to me. To see the customized theme, you will need to start using some of the Ant Design components. Right now you are just using the default React app component, and this is not affected by the Ant Design theme. (It's just a plain component generated by create-react-app.)

Hope that helps!

ndbroadbent commented 5 years ago

Oh sorry, I just saw that you are using an Ant Design button. The button is actually not affected by the @primary-color variable.

You need to set @btn-primary-color - https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less#L125-L159