在Material UI中,我想在按钮上设置borderRadius。传递style属性似乎适用于,FlatButton但不适用于RaisedButton。
style
FlatButton
RaisedButton
对于RaisedButton,borderRadius应用于父对象<div>(这是必需的),而不是<button>自身(也是必需的)
<div>
<button>
这是Material UI中的错误吗?还是这种行为是故意的?如果需要,那么如何制作带有圆角的RaisedButton?
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> ); }; }
这是预期的行为,并在docs中这样说。作为记录,您永远不希望将style道具传递给多个孩子,因为没有样式在所有孩子中都没有意义- 并且您将嵌套应用到多深?
但我认为您在这里混为一谈。style在 组件 上使用只会影响根元素- 并假设开发人员选择传递样式标签(他们这样做了)。
但是,您要执行的操作不是设置 组件的 样式,而是设置 组件 的元素 的 样式。您要做的是使用CSS类:
<RaisedButton label="raised button" className="raised-button--rounded" /> .raised-button--rounded, .raised-button--rounded button { border-radius: 25px; /* assuming one is not already defined */ }
注意 :开发人员无意让您更改他们未明确公开的组件样式。通过这种方法,您最终 会 遇到问题。