Question

148

changing font size of material-ui buttons, and having the buttons scale?

rated 0 times [ 155] [ 7] / answers: 1 / hits: 58291 / 8 Years ago, tue, july 5, 2016, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dequant

Add To Favorites

Follow

Total Points: 88

Total Questions: 99

Total Answers: 95

Location: Ukraine

Member since Sun, Dec 13, 2020

4 Years ago

dequant questions

1 React App: EventSource's response has a MIME type (application/json) that is not text/event-stream. Aborting the connection

Sat, Aug 29, 20, 00:00, 4 Years ago

1 How to get Image Url from local Json file in React.js

Tue, Aug 4, 20, 00:00, 4 Years ago

1 Get next cron job timing in node-cron

Thu, Jun 25, 20, 00:00, 4 Years ago

1 How to get current latitude and longitude in vuejs

Sat, Jun 20, 20, 00:00, 4 Years ago

1 React lazy loading - when to use

Tue, Feb 25, 20, 00:00, 4 Years ago

View All

answered 8 Years ago bobbyw · Accepted Answer

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