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

Posted 2023-02-21

【中文标题】改变material-ui按钮的字体大小，并让按钮缩放？

【英文标题】：changing font size of material-ui buttons, and having the buttons scale?

【发布时间】：2016-11-07 15:58:06

【问题描述】：

我似乎在更改 Material-UI（用于 React）RaisedButton 上的字体大小并让按钮本身正确缩放时遇到问题。

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

CSS：

.buttonText 
    font-size: 63px;

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

【参考方案1】：

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

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

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

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

【参考方案2】：

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

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

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

【讨论】：

你说的是 labelSize 还是 labelStyle？

@CJBrew labelStyle，感谢您的提醒。我已经编辑了原始答案。

【参考方案3】：

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

【参考方案4】：

需要添加lineHeight作为样式属性，以实现均匀间距：

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

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

干杯

【参考方案5】：

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

【参考方案6】：

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

【讨论】：

我尝试了这两种方法，但它们似乎不起作用。我注意到该按钮将水平而不是垂直缩放

你能分享一下小提琴吗？

tbh 我不知道如何在 JSFiddle 中包含 Material-UI。它本质上只是一个凸起的按钮，带有一个附加到标题的跨度，我在外部 css 文件中设置了样式

做了一些挖掘，似乎改变这些的高度实际上违反了材料设计准则......这可能是为什么它们没有设置为与材料 UI 中的字体大小一起缩放的原因。看起来我应该保持按钮/字体小。