更改material-ui按钮的字体大小,并使按钮缩放？

Question

我似乎遇到了改变Material-UI(对于React)RaisedButton的字体大小并让按钮本身适当缩放的问题.

<RaisedButton
label={<span className="buttonText">Log in Here</span>}
/>

CSS:

.buttonText {
    font-size: 63px;
}

文本大小更改但按钮本身不随其缩放.有谁知道这个的正确解决方案？我想按钮缩放文字大小.

Answer 1

使用labelSizeprop来覆盖元素的内联样式

<RaisedButton
    label="Button" 
    labelStyle={{ fontSize: '63px'}}
/>

Answer 2

问题是Material-UI内联其组件的所有样式,因此如果您尝试使用CSS选择器覆盖它们,它通常不能正常工作.相反,尝试style直接在组件上使用属性来覆盖您不想要的任何内联样式.它看起来像这样:

<RaisedButton style={{ fontSize: '63px' }} label='Log in Here' />

如果它仍然看起来不太正确,只需检查该组件上生成的所有内联样式并查看您想要更改的内容,然后将其添加到style对象中.

这是一个古老的答案，MUI 已经彻底修改了他们的样式系统。现在您将使用 `sx` 属性并定义响应值，例如 [this](https://mui.com/system/the-sx-prop/#responsive-values) (2认同)