0

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

enter image description here

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.

enter image description here

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,
            },
Jason Krowl
  • 84
  • 2
  • 15

0 Answers0