React-Toolbox: How to apply theme

问题

I'm using react toolbox and in my webpack configuration i have (i post just the significant part of the configuration):

loaders: [
..... 
ExtractTextPlugin.extract('style',
                'css?sourceMap&modules&importLoaders=1&localIdentName=' +
                '[name]__[local]___[hash:base64:5]!postcss!sass') }
        ]
postcss: [autoprefixer],
    sassLoader: {
      data: '@import "' + path.resolve(__dirname, 'app/theme/_config.scss') + '";'
    }

In app/theme/_config.scss i have defined:

@import "~react-toolbox/lib/colors";
@import "~react-toolbox/lib/globals";
@import "~react-toolbox/lib/mixins";

$color-primary: $palette-orange-500;
$color-primary-dark: $palette-orange-700;

Right now any strange, my colors are applied correctly.

Now, i want to create a custom Card component, and i have defined it like this (just for test the theme):

import theme from './style.scss';
const CardStatus = ({ children, ...other}) => (
    <Card {...other} theme={theme}>
        <CardTitle
            title="A title"
            subtitle="a subtitle"
            theme={theme}
        />
    </Card>
);

CardStatus.propTypes = {
    children: PropTypes.node
};

export default CardStatus;

In style.scss i have:

.title {
  color: yellow;
}

My application compile without errors, but the yellow color are not applied to my CardTitle:

I did tried with:

theme={theme}
theme={theme.title}

But nothing... color not works.

What i have do wrong ?

回答1:

There is some stuff to consider when you are theming a component. First of all you have to understand that what we are doing passing a custom theme object is to append custom classNames to the ones defined internally.

Custom classNames should implement a higher priority than the default ones to successfully override them. Also you have to take into account that internal classes may not have the minimal priority though.

In your example your are passing a theme object with a class definition for .title that has the minimal priority. If you check the source you'd see that the default selector has more priority than that. To override the default you need at least the same priority and to bundle your css after the original. Please check a complete answer here

回答2:

apply your style using className={theme.title} in your CardTitle instead of theme={theme.title}

来源：https://stackoverflow.com/questions/38026782/react-toolbox-how-to-apply-theme

标签

reactjs

react-toolbox