How to further customize react-toolbox component beyond theme

Question

I managed to theme my components but there are places where I want to further customize it in specific areas of my app. For example in general, I want theme styles applied, but I may still want to add additional padding to some element. I find that I can do

<ListItem styleName="app.navItem" /> but this only styles the list item. But not the list item icon if I want to style it.

Answer 1

One way of achieving this, according to this 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>

This just changes the icon color. Likewise, you can customize most of the components by

1. looking up the class name of the element you want to change
2. finding that class names' specificity in "theme.css" for that component in node_modules (node_modules\react-toolbox\components\)
3. overwriting with your own styles.

Hope this helps

EDIT

if you have only one css file to import, you can avoid using 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>