如何進一步自定義反應工具箱組件主題

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> 

這j的一種方式ust更改圖標顏色。同樣，您也可以通過

1. 定製大部分組件的仰視你想改變
2. 發現，類名特異性‘theme.css’在node_modules該組件的元素的類名（node_modules\react-toolbox\components\ ）
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>