材质UI内联样式不起作用

问题描述

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

In Material UI, I want to set borderRadius on my buttons. Passing the style attribute seem to work for FlatButton but not for RaisedButton.

对于RaisedButton，borderRadius应用于父级<div>(这是必需的)，而不是应用于<button>本身(这也是必要的)

For RaisedButton, the borderRadius is applied to the parent <div> (which is necessary) but not to <button> itself (which is also necessary)

这是Material UI中的错误吗?还是这种行为是故意的?如果需要，那么如何制作带有圆角的RaisedButton?

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>
    );
  };
}

推荐答案

这是预期的行为，并且在文档中这样说.作为记录，您永远都不希望将style道具传递给多个子对象，因为没有样式在所有子对象中都没有意义-以及您将它们应用到嵌套中的深度如何?

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?

但是，我认为您在这里混合考虑.在 component 上使用style仅应影响根元素-并假设开发人员选择传递样式标签他们做了.

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.

但是，您要执行的操作不是设置组件的样式，而是设置该组件 of 的元素的样式.您要做的是使用CSS类:

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.

这篇关于材质UI内联样式不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！