web-dev-qa-db-ja.com

material-uiボタンのフォントサイズを変更し、ボタンを拡大縮小しますか？

Material-UI（React用）のRaisedButtonのフォントサイズを変更し、ボタン自体をそれに合わせて適切にスケーリングすることに問題があるようです。

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

CSS：

.buttonText {
    font-size: 63px;
}

テキストのサイズは変わりますが、ボタン自体はそれに合わせて調整されません。誰かがこれに対する適切な解決策を知っていますか？ボタンをテキストサイズに合わせてスケーリングしたい。

javascriptcssreactjsmaterial-uijsx
7
Rolodecks

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

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

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

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

9
carl

labelSizeプロップを使用して、要素のインラインスタイルをオーバーライドします

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

<RaisedButton
    label="Button" 
    labelStyle={{ fontSize: '63px'}}
/>
11
vibrationbaby
<RaisedButton
   label="Label" 
   labelStyle={{ fontSize: 15 }}
/>
4
user3844078

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

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

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

乾杯

3
tgrrr

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

0
Vivek Pratap Singh