antd-theme
Provide runtime dynamic theme for ant design.
Features
- Quick synchronous theme switching.
- Support real-time modification of color / dimension variables.
- Small packaging size, no need to pack multiple style files.
- Code splitting friendly.
Install
Install with npm
$ npm install --save antd-theme
Usage
It's recommended to combine antd-theme/plugin
with the css-loader
and less-loader
Then add the loader and the plugin to your webpack config. For example:
webpack.config.js
const AntdThemePlugin = ; moduleexports = module: rules: test: /\.sx?$/ use: loader: 'babel-loader' options: plugins: 'import' libraryName: 'antd' style: true presets: 'react-app' test: /\.less$/i use: loader: AntdThemePluginloader loader: 'css-loader' loader: 'less-loader' options: javascriptEnabled: true plugins: // Variables declared here can be modified at runtime variables: 'primary-color' themes: name: 'dark' filename: require name: 'compact' filename: require ;
app.jsx
;;;;; ; ; ; ReactDOM.render, document.getElementById'root';
For those who are using react-app-rewire-less
and customize-cra
with react-app-rewired, enable javascript like this
config-overrides.js
const override fixBabelImports addLessLoader addPostcssPlugins adjustStyleLoaders addWebpackPlugin = ; const AntdThemePlugin = ; moduleexports = ;
Security considerations
In order for style
elements to be added to the DOM, a nonce
attribute may need to be attached to the elements to adhere to a CSP requirements. To provide the value, you can specify the nonce
value by defining a CSPSettings
object on the page in global scope:
windowCSPSettings = nonce: 'nonce';