Material UI 内联样式不起作用

IT技术 reactjs material-ui
2021-04-23 06:49:52

在 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>
    );
  };
}
1个回答

这是预期的行为,并在 docs 中这么说作为记录,您永远不会希望将一个styleprop 传递给多个孩子,因为所有孩子都没有任何样式 - 以及您将应用它们的嵌套深度有多深?

但我认为你在这里混合了担忧。使用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 */
}

注意:开发人员不打算让您更改他们没有特别公开的组件样式。通过这种方法,您最终遇到问题。

在此特定示例中,此答案中提供的代码不起作用(“material-ui”:“^0.14.2”)border-radius 已内联定义,是否意味着无法更改它?(除了使用 !important)
2021-05-28 06:49:52
非常感谢您确认我怀疑的情况
2021-05-29 06:49:52
这不是一个合理的期望,我怀疑您永远不会在您使用的任何组件库中找到该功能。该库要么 (a) 必须明确支持圆角,欢迎您与开发人员讨论(尽管它不是 MD 规范的一部分);或者 (b) 必须考虑每一个可能的CSS 属性并解析哪些属性要发送到哪些子组件。后者不合理。作为记录,这是许多人反对在 React 中使用内联样式的原因之一。对于类,解决方案是微不足道的。
2021-05-31 06:49:52
除了!important,没有。这就是nota bene 的意思。遇到问题,因为开发人员使用内联样式并且不支持更改任意组件样式。但我认为这就是使用像 Material Design 这样的规范的意义所在——你不应该改变它。
2021-06-11 06:49:52
我原则上同意你所说的。在实践中,我只想要圆角。我的期望是,当我传递style属性时,根组件应该知道哪个孩子也需要该样式,并且知道应该应用多深。如果组件不这样做,那么您不会说这种行为是意外的吗?
2021-06-17 06:49:52