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

Question

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

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

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

Answer 2

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

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

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