Question 356198 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to change the font weight in material UI

I tried to change the font weight for the buttons within a navbar, but I don’t know why does it go wrong every time. Firstly, I created a separate css file where I tried to set the font weight to bold, no success, then, I tried to set inline styles with the help of style property, and once again, no success, then, I tried to set inline styles with the help of sx property, and of course, again, no success…I tried even to create a styles object which encompasses the font weight for the buttons, as you may see here, but no success – even if I specified the font weight as a number, not as ‘bold’…I don’t know what to do. Is is something wrong with the material UI so that it overwrites some css properties? If so, how should I get rid of this? Here is a code snippet from my project:

import * as React from 'react'
import '@fontsource/roboto'
import { AppBar, Toolbar, Typography, Button } from '@mui/material'

const styles = {
  toolbar: {
    justifyContent: 'space-between',
  },
  btn: {
    color: 'inherit',
    outline: 'none',
    fontWeight: 700,
  },
}

function App() {
  return (
    <>
      <AppBar>
        <Toolbar style={styles.toolbar}>
          <div>
            <Button style={styles.btn} sx={{ fontWeight: 800 }}>
                USERS
            </Button>
          </div>
        </Toolbar>
      </AppBar>
    </>
  )
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    When I import roboto only the default roboto font with its weight preset at 400 is actually imported. If I want to use roboto, but, with its weight 700 too, I have to explicitly import this flavor of roboto, i.e., import "@fontsource/roboto/700.css"


  2. 0

    I think you are overriding your styles.

        import * as React from "react";
    import "@fontsource/roboto";
    import { AppBar, Toolbar, Typography, Button } from "@mui/material";

    const toolbarStyle = {
      justifyContent: "space-between",
    };

    const btnStyle = {
      color: "inherit",
      outline: "none",
      fontWeight: 700,
    };

    function App() {
      return (
        <>
          <AppBar>
            <Toolbar sx={toolbarStyle}>
              <div>
                <Button sx={btnStyle}>USERS</Button>
              </div>
            </Toolbar>
          </AppBar>
        </>
      );
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search