1

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!

Preview
  • 35,317
  • 10
  • 92
  • 112
Charley B.
  • 74
  • 7

1 Answers1

3

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.

Preview
  • 35,317
  • 10
  • 92
  • 112
  • Wrapping it doesn't seem to work. Can't win them all :) – Charley B. May 05 '17 at 01:40
  • I was saying something like wrap the icon in a div, give the div a `className `and then stylize it using `.yourclass > span`, it should work with `!important` ;) – Preview May 05 '17 at 01:43