Javascript 更改 material-ui 按钮的字体大小，并让按钮缩放？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38209780/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
changing font size of material-ui buttons, and having the buttons scale?
提问by Rolodecks
I seem to be having an issue with changing the font sizes on Material-UI's (for React) RaisedButton and having the button itself scale properly with it.
我似乎在更改 Material-UI（用于 React）RaisedButton 上的字体大小以及让按钮本身正确缩放时遇到问题。
<RaisedButton
label={<span className="buttonText">Log in Here</span>}
/>
CSS:
CSS：
.buttonText {
font-size: 63px;
}
The text size changes but the button itself doesn't scale with it. Does anyone know the proper solution to this? I want to button to scale with the text size.
文本大小会发生变化，但按钮本身不会随之缩放。有谁知道正确的解决方案？我想按文本大小进行缩放。
回答by vibrationbaby
Use the labelSizeprop to override the inline style for the element
使用labelSizeprop 覆盖元素的内联样式
http://www.material-ui.com/#/components/raised-button
http://www.material-ui.com/#/components/raised-button
<RaisedButton
label="Button"
labelStyle={{ fontSize: '63px'}}
/>
回答by carl
The problem is Material-UI inlines all of the styles for their components, so if you try to override them with CSS selectors it doesn't usually work quite right. Instead, try overriding whatever inline styles you don't want using the styleproperty directly on the component. It would look something like this:
问题是 Material-UI 内联了其组件的所有样式，因此如果您尝试使用 CSS 选择器覆盖它们，它通常无法正常工作。相反，尝试style直接在组件上使用该属性来覆盖您不想要的任何内联样式。它看起来像这样：
<RaisedButton style={{ fontSize: '63px' }} label='Log in Here' />
<RaisedButton style={{ fontSize: '63px' }} label='Log in Here' />
And if it still doesn't look quite right, just inspect all the generated inline styles on that component and see what you'd like to change, then just add that to the styleobject as well.
如果它仍然看起来不太正确，只需检查该组件上所有生成的内联样式并查看您想要更改的内容，然后将其添加到style对象中。
回答by user3844078
<RaisedButton
label="Label"
labelStyle={{ fontSize: 15 }}
/>
回答by tgrrr
It needs to be added with lineHeight as a style prop for even spacing:
它需要添加 lineHeight 作为均匀间距的样式道具：
< RaisedButton style = {{lineHeight: '100px'}}
label = 'lineHeight in style' / >
Here's a fiddle with all of the different solutions: https://jsfiddle.net/botbotdotdot/kfph5cc2/
这是所有不同解决方案的小提琴：https: //jsfiddle.net/botbotdotdot/kfph5cc2/
Cheers
干杯
回答by Vivek Pratap Singh
Use font-size unit as Percent (%)or em. For e.g font-size:12%
使用字体大小单位作为Percent (%)或em。例如font-size:12%
