IT技术 - 更改 material-ui 按钮的字体大小，并让按钮缩放？ - 吾爱随笔录

IT技术 javascript css reactjs material-ui jsx

2021-05-06 20:46:01

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

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

CSS：

.buttonText {
    font-size: 63px;
}

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

4个回答

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

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

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

使用labelStyleprop 覆盖元素的内联样式

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

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

它需要添加 lineHeight 作为均匀间距的样式props：

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

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

干杯

其它你可能感兴趣的问题