web-dev-qa-db-de.com

schriftgröße der Ui-Schaltflächen ändern und die Schaltflächen skalieren lassen?

Ich habe anscheinend ein Problem mit dem Ändern der Schriftgrößen auf RaisedButton von Material-UI (für React) und der Schaltfläche selbst, die richtig skaliert wird.

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

CSS:

.buttonText {
    font-size: 63px;
}

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

javascriptcssreactjsmaterial-uijsx
7
Rolodecks

Das Problem besteht darin, dass die Material-UI alle Stile für ihre Komponenten einfügt. Wenn Sie also versuchen, sie mit CSS-Selektoren zu überschreiben, funktioniert sie normalerweise nicht richtig. Versuchen Sie stattdessen, alle Inline-Stile zu überschreiben, die Sie nicht möchten, indem Sie die style -Eigenschaft direkt in der Komponente verwenden. Es würde ungefähr so ​​aussehen:

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

Und wenn es immer noch nicht ganz richtig aussieht, überprüfen Sie einfach alle generierten Inline-Stile dieser Komponente und sehen Sie, was Sie ändern möchten. Fügen Sie dann auch das style-Objekt hinzu.

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

9
carl

Verwenden Sie die Variable labelSize, um den Inline-Stil für das Element zu überschreiben

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

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

Es muss mit lineHeight als Stilstütze für gleichmäßige Abstände hinzugefügt werden:

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

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

Prost

3
tgrrr

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

0
Vivek