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

前端 未结 5 1378
不思量自难忘°
不思量自难忘° 2021-01-18 02:46

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.

<         


        
相关标签:
5条回答
  • 2021-01-18 02:48
    <RaisedButton
       label="Label" 
       labelStyle={{ fontSize: 15 }}
    />
    
    0 讨论(0)
  • 2021-01-18 02:55

    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

    0 讨论(0)
  • 2021-01-18 02:58

    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

    0 讨论(0)
  • 2021-01-18 03:03

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

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

    <RaisedButton
        label="Button" 
        labelStyle={{ fontSize: '63px'}}
    />
    
    0 讨论(0)
  • 2021-01-18 03:10

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

    0 讨论(0)
提交回复
热议问题