Material UI - 按钮标签中的字体大小

Posted 2023-02-22

【中文标题】Material UI - 按钮标签中的字体大小

【英文标题】：Material UI - font size in button label

【发布时间】：2018-08-03 00:42:24

【问题描述】：

我正在尝试弄清楚如何在我的 Material UI 按钮中增加标签的字体大小。

我有一个按钮设置：

从“反应”导入反应； 从'../materialui/Button.js'导入MyButton；

const style = 
    background: '#FF5349',
    color: 'white',
    padding: '0 30px',
    textTransform: "uppercase",
  ;


  const Start = () => (
      <span>

        <MyButton style=style size="large">GET STARTED</MyButton>


    </span>

);

export default Start;  

我找不到将字体大小添加到样式属性的方法。

其他堆栈溢出帖子建议使用 style 属性将其作为内联样式执行，但这会覆盖我的 const 定义。

【问题讨论】：

看起来 MyButton 是您的自定义组件。对吗？

【参考方案1】：

如果您不想将 fontSize: '42px' 添加到您的 styles 对象（可能是因为您想在其他地方重用它？）您可以使用为您的按钮添加的样式构建一个新对象：

const Start = () => (
    <span>
        <MyButton style=...style, fontSize: '42px' size="large">GET STARTED</MyButton>
    </span>
);

【讨论】：

它无法识别样式元素内的 fontSize 属性（如您的示例中所示）。我刚刚制作了 2 个按钮，所以我可以将大小添加到我的 const 中。不过还是谢谢。

【参考方案2】：

我不知道Material中的myButton是否和RaisedButton一样，反正

Material-ui 中的按钮类似于 Div > Button > Div > Div > span

因此，如果您想首先为按钮设置样式，则需要创建一个 CSS 类，例如

在您的 css 文件中

这用于样式按钮

.StylingButtonExample button
   background-color: red;

这用于设置按钮内的文本样式

.StylingButtonExample button div div span
  color: blue;

在反应文件中

import RaisedButton from 'material-ui/RaisedButton';

 <RaisedButton label="Default" className='StylingButtonExample' />

希望这对您和其他人有所帮助

【参考方案3】：

假设 <MyButton /> 组件实际上是 material-ui 提供的 <RaisedButton /> 组件，您可以简单地将标签样式应用于 labelStyle 属性。

因此，如果你想将字体大小更改为42px，你可以简单地写成这样：

<MyButton labelStyle= fontSize: '42px' >GET STARTED</MyButton>