Search code examples
javascriptreactjsmaterial-uiaphrodite

How to overwrite material-ui className with aphrodite?

I'm using React and styling some icons. I'm using the Material-UI library for my components. One of the components I'm using is the FontIcon . It already has a className on it, and I'm not able to override with my passed in aphrodite style.

<FontIcon className="material-icons">
    bug_report
</FontIcon>

If I set the style on this control, it works fine:

<FontIcon className="material-icons" style={{ color: 'red' }}>
  bug_report
</FontIcon>

How can you over-write an existing className? I've tried:

className={css(['material-icons', styles.colorize])}
className={css('material-icons', styles.colorize)}
className={('material-icons', css(styles.colorize))}

Thanks!

Solution

  • The issue is that this component doesn't allow to pass a custom className property, only the ability to extend with the style one as you can see in their PropTypes definition.

    Material-ui is using a style in JS form, and doesn't really want to deal with "normal" CSS, even though I agree sometimes it's easier to override.

    You could wrap your component in a div that you give your custom className and stylize the children instead. Appart from doing a pull request, there is not much choice.