web-dev-qa-db-fra.com

changer la taille de la police des boutons matériels et avoir l'échelle

Je semble avoir un problème avec la modification de la taille de la police dans Material-UI (pour React) RaisedButton et le fait que le bouton lui-même s'adapte correctement.

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

CSS:

.buttonText {
    font-size: 63px;
}

La taille du texte change, mais le bouton lui-même ne s'adapte pas à celui-ci. Est-ce que quelqu'un sait la bonne solution à cela? Je veux bouton pour mettre à l'échelle avec la taille du texte.

javascriptcssreactjsmaterial-uijsx
7
Rolodecks

Le problème est que Material-UI intègre tous les styles de leurs composants. Par conséquent, si vous essayez de les remplacer par des sélecteurs CSS, ils ne fonctionnent généralement pas correctement. Au lieu de cela, essayez de remplacer les styles en ligne que vous ne souhaitez pas utiliser à l'aide de la propriété style directement sur le composant. Cela ressemblerait à ceci:

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

Et si cela ne vous convient toujours pas, inspectez simplement tous les styles en-ligne générés sur ce composant et voyez ce que vous souhaitez modifier, puis ajoutez-le également à l'objet style.

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

9
carl

Utilisez la propriété labelSize pour remplacer le style en ligne de l'élément

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

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

Il doit être ajouté avec lineHeight comme accessoire de style pour un espacement uniforme:

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

Voici un fiddle avec toutes les solutions différentes: https://jsfiddle.net/botbotdotdot/kfph5cc2/

À votre santé

3
tgrrr

Utilisez l'unité de taille de police comme Percent (%) ou em. Par exemple font-size:12%

0
Vivek