如何在 ListItemButton 组件上覆盖 material UI .Mui-selected

Question

我有一个带有 selected 属性的列表项按钮。我想在我的 createTheme() 中设置样式我正在尝试覆盖选定的属性，但我无法让它工作。

//Navbar.js
<ListItemButton
   component={Link}
   to='/'
   selected={value === 0}
>

//primaryTheme.js
export default createTheme({
components: {
    MuiListItemButton: {
      root: {
        '&$selected': {
          color: '#5FBB7D',
          backgroundColor: '#F0F3F3',
        },
      },
    },
  },
})

Answer 1

如果您只是覆盖组件中的一个行为，例如 'selected'，您可以在标签组件中使用属性 'sx'。看起来像这样：

<ListItemButton sx={{
        '&.Mui-selected': {
          backgroundColor: 'rgba(220, 0, 50, 0.1)'
        }
      }} selected={0}> 
     <ListItemText primary={'label in item selected'} />
</ListItemButton>

希望对你有所帮助

Answer 2

在 MUI v5 中，他们将 JSS 切换为情感，因此使用美元符号进行选择将不再有效。您可以改为使用 className 来定位组件状态。

export default createTheme({
  components: {
    MuiListItemButton: {
      root: {
        '&.Mui-selected': {
          color: '#5FBB7D',
          backgroundColor: '#F0F3F3',
        },
      },
    },
  },
});

如何在 ListItemButton 组件上覆盖 material UI .Mui-selected

how to override material UI .Mui-selected on ListItemButton component

reactjs

material-ui