如何进一步自定义react-toolbox组件超出主题

Question

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

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

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

theme.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>

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

自定义大多数组件

1. 查找要更改的元素的类名称
2. 在node_modules（node_modules\react-toolbox\components\）
中找到该组件的名称在“theme.css”中的特异性
3. 用自己的风格覆盖。

希望这有帮助

修改

如果您只有一个要导入的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>