I am using react-toolbox and react-css-themr to supply theme. I create my contextTheme and supply it through ThemeProvider. Everything's seems fine. I am using webpack, the styles are exported and loaded in the attribute of my page, so there is no problem with the importing the css.
EDIT: I can clearly see the context theme is loaded to the website, as I can observe RT objects
my contextTheme file looks like this and is named contextTheme.js
export default {
RTAutocomplete: require('./assets/style/themes/autocomplete.module.css'),
RTButton: require('./assets/style/themes/button.module.css')
};
I can see custom theme in tag like this
.autocomplete-module--autocomplete--tESXbPMw {
padding: 0
}
.autocomplete-module--autocomplete--tESXbPMw .autocomplete-module--suggestions--t6ziL7OQ {
background-color: red;
border-color: blue;
border-radius: 0
}
theme provider looks like this
<ThemeProvider theme={contextTheme}>
<Router store={s} history={h}>
{ routes }
</Router>
</ThemeProvider>
resulting html element still has only default style applied, because no style is attached to it.
In case my webpack css config looks like this. I am not sure if that is relevant, but just in case.
{
test: /\.scss|\.css$/i,
use: [
"style-loader",
{
loader: "css-loader",
options: {
importLoaders: 1,
modules: {
exportGlobals: true,
mode: "local",
auto: undefined,
localIdentName: "[name]--[local]--[hash:base64:8]",
},
sourceMap: shouldUseSourceMap,
}
},
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
[
"postcss-preset-env",
{
// Options
},
],
],
},
},
},
],
sideEffects: true,
},