マテリアルUIのボタンのフォントサイズを変更し、ボタンのスケールを変更しますか？ - javascript、css、reactjs、material-ui、jsx

Material-UI（React用）のRaisedButtonのフォントサイズを変更し、ボタン自体を適切に拡大縮小することに問題があるようです。

<RaisedButton
label={<span className="buttonText">Log in Here</span>}
/>

CSS：

.buttonText {
font-size: 63px;
}

テキストサイズは変更されますが、ボタン自体はそれに合わせて拡大縮小されません。これに対する適切な解決策を知っている人はいますか？テキストサイズに合わせてボタンを拡大縮小したいと思います。

回答：

回答№1は6

問題はMaterial-UIがすべてをインライン化することですコンポーネントのスタイルなので、CSSセレクターでオーバーライドしようとすると、通常は正しく機能しません。代わりに、使用したくないインラインスタイルをオーバーライドしてみてください。 style コンポーネントに直接プロパティ。次のようになります。

<RaisedButton style={{ fontSize: "63px" }} label="Log in Here" />

それでも正しく表示されない場合は、そのコンポーネントで生成されたすべてのインラインスタイルを調べて、何を変更したいかを確認してから、それをに追加します。 style 同様にオブジェクト。

http://www.material-ui.com/#/components/raised-button

---

回答№2の10

使用 labelSize 要素のインラインスタイルをオーバーライドするprop

http://www.material-ui.com/#/components/raised-button

<RaisedButton
label="Button"
labelStyle={{ fontSize: "63px"}}
/>

---

回答№3の4

<RaisedButton
label="Label"
labelStyle={{ fontSize: 15 }}
/>

---

答え№4の2

等間隔のスタイルプロップとしてlineHeightを追加する必要があります。

  < RaisedButton style = {{lineHeight: "100px"}}
label = "lineHeight in style" / >

これが、さまざまなソリューションすべてのフィドルです。 https://jsfiddle.net/botbotdotdot/kfph5cc2/

乾杯

---

回答№5の場合は0

フォントサイズの単位を次のように使用します Percent (%) または em。たとえば font-size:12%

---