4

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>
    );
  };
}
Sida Zhou
  • 3,529
  • 2
  • 33
  • 48

1 Answers1

10

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.

Josh David Miller
  • 120,525
  • 16
  • 127
  • 95
  • I agree with what you have said in principle. In practice, I just want rounded corners. My expectation is that when i pass `style` attribute, then the root component should know which child needs that styling as well and knows how deep it should be applied. If the component doesnt do this, then wouldn't you say the behaviour is unexpected? – Sida Zhou Jan 13 '16 at 22:34
  • In this specific example, code provided in this answer doesnt work ("material-ui": "^0.14.2") border-radius is already defined inline, does it mean there is no way to change it? (apart from using !important) – Sida Zhou Jan 13 '16 at 22:39
  • That's not a reasonable expectation and I suspect you will never find that functionality in any component library you use. The library would either (a) have to explicitly support rounded corners, which you are welcome to take up with the developers (though it's not part of the MD spec); or (b) have to consider every single **possible** CSS property and parse out which ones to send to which child components. The latter is not reasonable. For the record, this is one reason many oppose using inline styles with React. With classes, the solution is trivial. – Josh David Miller Jan 13 '16 at 22:39
  • 1
    Apart from `!important`, no. That's what the *nota bene* was meant to indicate. You *will* encounter problems because the developers use inline styles and do not support changing arbitrary component styles. But I would argue that's the point of using a spec like Material Design - you're not supposed to change it. – Josh David Miller Jan 13 '16 at 22:41
  • Thank you very much for confirming what I suspected to be the case – Sida Zhou Jan 13 '16 at 22:42
  • @SidaZhou, @JoshDavidMiller is 100% right. **Material UI** implements **material design** so you won't have more than defined in material. If you need a particular component that looks like `RaisedButton` the way I would go if I were you is to derivate material UI RaisedButton to create your own. Now is it worth the effort (effort in term of time only since it may be nice to create it)? You alone have the answer. – MacKentoch Jan 14 '16 at 11:49