Question

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

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

Answer 1

实现此目标的一种方法

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>

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

自定义大多数组件

查找要更改的元素的类名称
在node_modules（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>

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

1 个答案: