Source:  Twitter logo

I seem to be having an issue with changing the font sizes on Material-UI's (for React) RaisedButton and having the button itself scale properly with it.

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

CSS:

.buttonText {
    font-size: 63px;
}

The text size changes but the button itself doesn't scale with it. Does anyone know the proper solution to this? I want to button to scale with the text size.

The problem is Material-UI inlines all of the styles for their components, so if you try to override them with CSS selectors it doesn't usually work quite right. Instead, try overriding whatever inline styles you don't want using the style property directly on the component. It would look something like this:

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

And if it still doesn't look quite right, just inspect all the generated inline styles on that component and see what you'd like to change, then just add that to the style object as well.

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

11 users liked answer #0dislike answer #011
carl profile pic
carl

Use the labelStyle prop to override the inline style for the element

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

<RaisedButton
    label="Button" 
    labelStyle={{ fontSize: '63px'}}
/>
11 users liked answer #1dislike answer #111
vibrationbaby profile pic
vibrationbaby
<RaisedButton
   label="Label" 
   labelStyle={{ fontSize: 15 }}
/>
4 users liked answer #2dislike answer #24
user3844078 profile pic
user3844078

It needs to be added with lineHeight as a style prop for even spacing:

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

Here's a fiddle with all of the different solutions: https://jsfiddle.net/botbotdotdot/kfph5cc2/

Cheers

3 users liked answer #3dislike answer #33
tgrrr profile pic
tgrrr

You can use classes props to override the default css styles applied to every material-ui component. You can find out more in this youtube video: https://www.youtube.com/watch?v=mu8-u7V7Z8s&feature=emb_logo

0 users liked answer #4dislike answer #40
Ardalan Nahavandi profile pic
Ardalan Nahavandi

Use font-size unit as Percent (%) or em. For e.g font-size:12%

-1 users liked answer #5dislike answer #5-1
Vivek Pratap Singh profile pic
Vivek Pratap Singh

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).