材质UI - 按钮标签中的字体大小-Java 学习之路

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

我有一个按钮设置：

从'react'导入React;从'../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;

我找不到向styles属性添加font-size的方法 .

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

3 回答

0
如果你不想将 fontSize: '42px' 添加到你的 styles 对象（可能是因为你想在其他地方重用它？）你可以 Build 一个新的，为你的按钮添加了样式：
```
const Start = () => (
    <span>
        <MyButton style={{...style, fontSize: '42px'}} size="large">GET STARTED</MyButton>
    </span>
);
```
回复于 2024-05-12T03:03:41+08:00
0
我不知道材料中的 myButton 是否与 RaisedButton 相同无论如何，

材料中的按钮 - 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' />
```
希望这会对你和其他人有所帮助
回复于 2024-05-12T03:03:41+08:00
0

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

因此，如果要将font-size更改为 42px ，可以按如下方式编写：

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

回复于 2024-05-12T03:03:41+08:00

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

3 回答

相关问题