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

Question

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

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

Answer 1

根据本节，实现此目的的一种方法

列表项.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
};

组件.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\react-toolbox\components\在 node_modules ( )中为该组件在“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>