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

Question

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

我有一个按钮设置：

导入来自＆＃39;的反应＆＃39 ;; 从＆＃39; ../ materialui / Button.js＆＃39;;

导入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;  

我无法找到一种向styles属性添加font-size的方法。

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

Answer 1

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

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

Answer 2

我不知道Material中的myButton是否与RaisedButton相同，

素材中的按钮 - 它就像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' />

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

Answer 3

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

因此，如果您想将字体大小更改为42px，则可以按如下方式编写：

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