如何在主题之外进一步自定义 react-toolbox 组件答案

【问题标题】：How to further customize react-toolbox component beyond theme如何在主题之外进一步自定义 react-toolbox 组件
【发布时间】：2017-04-19 10:04:52
【问题描述】：

我设法为我的组件设置了主题，但有些地方我想在我的应用程序的特定区域进一步自定义它。例如，一般来说，我希望应用主题样式，但我可能仍想为某些元素添加额外的填充。我发现我可以做到

<ListItem styleName="app.navItem" /> 但这只会设置列表项的样式。但如果我想设置它的样式，则不是列表项图标。

【问题讨论】：

标签： css reactjs react-toolbox

【解决方案1】：

根据section实现这一点的一种方法

listItem.css

// following the same specificity for the material-icon in "list" component's "theme.css"
.itemAction {
  & > [data-react-toolbox='font-icon'] {
    color: red;
  }
}

主题.js

import RTList from './listItem.scss';

export default {
  RTList
};

component.js

import { ThemeProvider } from 'react-css-themr';
import theme from './theme';

....

<ThemeProvider theme={theme}>
  <List selectable ripple>
    <ListSubHeader caption="Explore characters" />
    <ListItem
      avatar="https://dl.dropboxusercontent.com/u/2247264/assets/m.jpg"
      caption="Dr. Manhattan"
      legend="Jonathan Osterman"
      rightIcon="star"
    />
    <ListDivider />
    <ListItem caption="Contact the publisher" leftIcon="send" />
  </List>
</ThemeProvider>

这只是改变了图标的颜色。同样，您可以通过

自定义大部分组件

查找要更改的元素的类名
在“theme.css”中为该组件在 node_modules (node_modules\react-toolbox\components\) 中找到类名的特异性 (node_modules\react-toolbox\components\)
用您自己的样式覆盖。

希望对你有帮助

编辑

如果你只有一个css文件要导入，可以避免使用ThemeProvider

import theme from './listItem.css';

....

<List selectable ripple theme={theme}>
  <ListSubHeader caption="Explore characters" />
  <ListItem
    avatar="https://dl.dropboxusercontent.com/u/2247264/assets/m.jpg"
    caption="Dr. Manhattan"
    legend="Jonathan Osterman"
    rightIcon="star"
  />
  <ListDivider />
  <ListItem caption="Contact the publisher" leftIcon="send" />
</List>

【讨论】：