Search code examples
reactjsmaterial-ui

Separate text styling

I have a question regarding the styling of the following text. I would like to style the number separately. In other words, I want to make the number larger than the text. How can I apply the inline style with the following code?

enter image description here

This is the style attribute of the bar chart

  text={({ value, valueMax }) => `${value} % ${innerText}`}
Solution

  • I assume that the component you are using from MUI is Gauge.

    Then you can do the following workaround to provide custom text with styling as MUI does not provide such option

     const [value, setValue] = React.useState<any>('');
  return (
    <div style={{ position: 'relative', width: '200px' }}>
      <div
        style={{
          position: 'absolute',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
          'text-align': 'center',
        }}
      >
        <div style={{'font-size': '50px'}}>{value}</div>
        <div>Soft Bounce</div>
      </div>

      <Gauge
        {...settings}
        cornerRadius="50%"
        text={({ value }) => {
          setValue(value);
          return '';
        }}
        sx={(theme) => ({
          [`& .${gaugeClasses.valueText}`]: {
            fontSize: 20,
          },
          [`& .${gaugeClasses.valueArc}`]: {
            fill: '#52b202',
          },
          [`& .${gaugeClasses.referenceArc}`]: {
            fill: theme.palette.text.disabled,
          },
        })}
      />
    </div>

    I am setting the value from Gauge to a state in order to display it with an absolute div in the center of the parent element. Notice styling of parent element wrapping Gauge and text.

    <div style={{ position: 'relative', width: '200px' }}>

    Adjust width as needed.