best practise react-toolbox changing default styles

Question

I'm using the react toolbox in my react project. Is there a way to set some default styles which override the styles from react-toolbox?

Wan't to change some colors and paddings?

Thanks for your help.

Can I do this with something like this:

postcssPlugins: [
    cssnext({ 
      features: {
        customProperties: {
          variables: {
            'color-primary': 'var(--palette-amber-500)',
          },
        },
      },
    }),

That should work. There are many ways to customize your coomponents. https://www.npmjs.com/package/react-toolbox#customizing-components — Venugopal, Apr 20 '17 at 14:30

score 0 · Accepted Answer · answered Apr 21 '17 at 05:50

solution is to create a theme.js component which overwrites the react-toolbox stuff

import RTInput from './input.css';
import RTTooltip from './tooltip.css'

export default {
    RTInput, RTTooltip
};

And then You need a theme-provider .. I did this in index.js

import {ThemeProvider} from 'react-css-themr';
import theme from './styles/react-toolbox-customs/theme.js';


   <ThemeProvider theme={theme}>

And wrap your content

thats it.

best practise react-toolbox changing default styles

1 Answers1