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

Question

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

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

CSS：

.buttonText {
    font-size: 63px;
}

文本大小会发生变化，但按钮本身不会随之缩放。有谁知道这个的正确解决方案？我想按钮缩放文字大小。

Answer 1

使用labelSize道具覆盖元素的内联样式

http://www.material-ui.com/#/components/raised-button

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

Answer 2

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

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

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

http://www.material-ui.com/#/components/raised-button

Answer 3

<RaisedButton
   label="Label" 
   labelStyle={{ fontSize: 15 }}
/>

Answer 4

需要添加lineHeight作为偶数间距的样式道具：

  < RaisedButton style = {{lineHeight: '100px'}}
    label = 'lineHeight in style' / >

这里是所有不同解决方案的小提琴：https://jsfiddle.net/botbotdotdot/kfph5cc2/

干杯

Answer 5

将字体大小单位用作Percent (%)或em。例如font-size:12%

Answer 6

您可以使用 classes props 来覆盖应用于每个 material-ui 组件的默认 css 样式。您可以在此 YouTube 视频中了解更多信息： https://www.youtube.com/watch?v=mu8-u7V7Z8s&feature=emb_logo