如何修改Material UI导航栏按钮的字体粗细？多种尝试均失败

你遇到的问题是因为Material UI的Button组件内部默认用Typography组件渲染文字，直接给Button设置fontWeight会被Typography的默认样式覆盖。以下是几种有效的解决方法：

方法一：通过sx属性针对内部Typography设置样式 #

利用CSS后代选择器，直接选中Button内部的Typography元素设置字体粗细：

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

const styles = {
  toolbar: {
    justifyContent: 'space-between',
  },
}

function App() {
  return (
    <>
      <AppBar>
        <Toolbar style={styles.toolbar}>
          <div>
            <Button sx={{ '& .MuiTypography-root': { fontWeight: 700 } }}>
                USERS
            </Button>
          </div>
        </Toolbar>
      </AppBar>
    </>
  )
}

方法二：使用Button的TypographyProps属性 #

Button组件提供了TypographyProps属性，可以直接给内部的Typography组件传递样式参数，这是更符合MUI设计的方式：

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

const styles = {
  toolbar: {
    justifyContent: 'space-between',
  },
}

function App() {
  return (
    <>
      <AppBar>
        <Toolbar style={styles.toolbar}>
          <div>
            <Button TypographyProps={{ fontWeight: 700 }}>
                USERS
            </Button>
          </div>
        </Toolbar>
      </AppBar>
    </>
  )
}

方法三：强制提高样式优先级（不推荐） #

如果以上方法都不行，可以用!important强制覆盖样式，但这会打乱MUI的样式优先级体系，尽量避免使用：

<Button sx={{ fontWeight: '700 !important' }}>
    USERS
</Button>

内容的提问来源于stack exchange，提问作者pauk