材質用戶界面-按鈕標簽中的字體大小

Question

我試圖弄清楚如何在我的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;  

我找不到將字體大小添加到樣式屬性的方法。

其他堆棧溢出文章建議使用style屬性將其作為內聯樣式進行，但這會覆蓋我的const定義。

Answer 1

如果您不想在您的styles對象中添加fontSize: '42px' （可能是因為您想在其他地方重用？），則可以使用為按鈕添加的樣式來構建一個新樣式：

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

Answer 2

我不知道材料中的myButton是否與RaisedButton相同，

在Material-ui中，它的Div > Button > Div > Div > span就像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屬性。

因此，如果您想將font-size更改為42px ，則只需編寫如下：

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