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>
);
};
}
See Question&Answers more detail:os