React-Toolbox: как применить тему

Question

Я использую набор инструментов реагирования и в моей конфигурации веб-пакета (я публикую только значительную часть конфигурации):

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') + '";'
    }

В app/theme/_config.scss я определил:

@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;

Щас какие-то странные, мои цвета наносятся правильно.

Теперь я хочу создать кастом Card компонент, и я определил его так (только для проверки темы):

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
};

экспорт по умолчанию CardStatus;

В style.scss у меня есть:

.title {
  color: yellow;
}

Мое приложение компилируется без ошибок, но желтый цвет не применяется к моему CardTitle:

Я попробовал с:

1. theme={theme}
2. theme={theme.title}

Но ничего... цвет не работает.

Что я делаю не так?

Answer 1

Есть некоторые вещи, которые необходимо учитывать при создании компонента. Прежде всего, вы должны понимать, что то, что мы делаем, передавая пользовательский объект темы, это добавление пользовательских имен классов к тем, которые определены внутри.

Пользовательские имена классов должны иметь более высокий приоритет, чем стандартные, чтобы успешно их переопределить. Также вы должны принять во внимание, что внутренние классы могут не иметь минимального приоритета.

В вашем примере вы передаете объект темы с определением класса для .title это имеет минимальный приоритет. Если вы проверите источник, вы увидите, что селектор по умолчанию имеет больший приоритет, чем этот. Чтобы переопределить значение по умолчанию, вам нужен как минимум тот же приоритет и связать ваш CSS после оригинала. Пожалуйста, проверьте полный ответ здесь

Answer 2

Применить свой стиль, используя className={theme.title} в вашем CardTitle вместо theme={theme.title}