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

Question

我似乎在更改 Material-UI 的（对于 React）RaisedButton 上的字体大小以及让按钮本身随它正确缩放方面遇到了问题。

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

CSS:

.buttonText {
    font-size: 63px;
}

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

Answer 1

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

Answer 2

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

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

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

Answer 3

使用 labelStyle 属性覆盖元素的内联样式

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

Answer 4

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

Answer 5

需要添加 lineHeight 作为均匀间距的样式属性：

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

这是一个包含所有不同解决方案的 fiddle：https://jsfiddle.net/botbotdotdot/kfph5cc2/

干杯

Answer 6

您可以使用类属性覆盖应用于每个 material-ui 组件的默认 css 样式。你可以在这个 youtube 视频中找到更多信息： https://www.youtube.com/watch?v=mu8-u7V7Z8s&feature=emb_logo

changing font size of material-ui buttons, and having the buttons scale?