Ändern der Schriftgröße von Material-Ui-Schaltflächen und Skalieren der Schaltflächen?

Question

Ich habe ein Problem mit der Änderung der Schriftgrößen auf Material-UI (für React) RaisedButton und die Schaltfläche selbst skalieren richtig damit.

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

CSS:

.buttonText { 
    font-size: 63px; 
} 

Die Textgröße ändert sich aber die Schaltfläche sich damit nicht maßstäblich. Kennt jemand die richtige Lösung dafür? Ich möchte mit der Textgröße skalieren.

Answer 1

Das Problem ist, dass Material-UI alle Stile für ihre Komponenten inline einfügt. Wenn Sie also versuchen, sie mit CSS-Selektoren zu überschreiben, funktioniert das normalerweise nicht richtig. Versuchen Sie stattdessen, die Inline-Stile, die nicht verwendet werden sollen, mit der Eigenschaft style direkt in der Komponente zu überschreiben. Es würde wie folgt aussehen:

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

Und wenn es noch nicht ganz richtig sieht, nur prüfen alle generierten Inline-Styles auf dieser Komponente und sehen, was Sie möchten, ändern, dann fügen Sie einfach das zu dem style Objekt auch.

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

Answer 2

Verwenden Sie die Schriftgröße als Percent (%) oder em. Beispiel: font-size:12%

Answer 3

die labelSize prop Verwendung für mäßigen Abstand des Inline-Stil für das Element

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

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

Answer 4

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

Answer 5

Es muss hinzugefügt werden, mit lineheight als Stil prop außer Kraft zu setzen :

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

Hier ist eine Geige mit all den verschiedenen Lösungen: https://jsfiddle.net/botbotdotdot/kfph5cc2/

Prost