Material UI inline style not working

Question

In Material UI, I want to set borderRadius on my buttons. Passing the style attribute seem to work for FlatButton but not for RaisedButton.

For RaisedButton, the borderRadius is applied to the parent <div> (which is necessary) but not to <button> itself (which is also necessary)

Is this a bug in Material UI? Or is this behaviour intended? If it's intended, then how do I make a RaisedButton with rounded corners?

import React from 'react';
import RaisedButton from 'material-ui/lib/raised-button';
import FlatButton from 'material-ui/lib/flat-button';

export default class MyButtons extends React.Component {

  render() {
    return (
      <div>
        <FlatButton label="flat button" style={{borderRadius: '25px'}}/> {/*works*/}
        <RaisedButton label="raised button" style={{borderRadius: '25px'}} /> {/*does not work*/} 
      </div>
    );
  };
}

Answer 1

This is the intended behaviour, and says so in the docs. For the record, you would never want a style prop to be passed to multiple children as no styles would make sense across all children - and how deep in nesting would you apply them?

But I think you're mixing concerns here. Using style on a component should only ever effect the root element - and that's assuming the developer chose to pass along the style tag, which they did.

But what you're looking to do is not style the component, but style the elements of the component. What you want to do is use a CSS class:

<RaisedButton label="raised button" className="raised-button--rounded" />

.raised-button--rounded,
.raised-button--rounded button {
  border-radius: 25px; /* assuming one is not already defined */
}

---

NB: The developers do not intend for you to change the component styles that they have not specifically exposed. Through this approach, you will run into issues eventually.