小编典典

材质UI内联样式不起作用

reactjs

在Material
UI中,我想在按钮上设置borderRadius。传递style属性似乎适用于,FlatButton但不适用于RaisedButton

对于RaisedButton,borderRadius应用于父对象<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>
    );
  };
}

阅读 299

收藏
2020-07-22

共1个答案

小编典典

这是预期的行为,并在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 */
}

注意 :开发人员无意让您更改他们未明确公开的组件样式。通过这种方法,您最终 遇到问题。

2020-07-22