reactjs 如何在MUI X中使用sx prop更改选定年份的背景色？

gpfsuwkq 于 5个月前发布在 React

关注(0)|答案(2)|浏览(59)

我很难在MUI X中改变组件上选定的年份或月份的背景颜色。文档上不清楚。当我点击月份和年份时，年份选择器会显示出来。
我可以更改选定日期的背景颜色，但不能更改年份的背景颜色。在devtools中，它显示.MuiPickersYear-yearButton.Mui-selected classnames，但当我使用它们时，没有任何变化。

slotProps={{
            day: {
              sx: {
                '&.MuiPickersDay-root.Mui-selected': {
                  backgroundColor: '#f0ca4d',
                },
              },
            },

字符串

reactjs

来源：https://stackoverflow.com/questions/77270554/how-to-change-datepicker-selected-years-background-color-with-sx-prop-in-mu

2条答案

按热度按时间

uxh89sit1#

尝试在&操作符和类选择器.之间使用空格，因此：

slotProps={{
            day: {
              sx: {
                '& .MuiPickersDay-root.Mui-selected': {
                  backgroundColor: '#f0ca4d',
                },
                '& .MuiPickersYear-yearButton.Mui-selected':{
                  backgroundColor: '#f0ca4d',
                }
              },
            },

字符串

赞(0）回复(0）举报 5个月前

8hhllhi22#

您需要将年份选择器添加到desktopPaper插槽prop而不是day插槽prop。这对我来说很有效：

slotProps={{
  tabs: {
    hidden: false,
  },
  inputAdornment: {
    position: 'start'
  },
  day: {
    sx: {
      '&.MuiPickersDay-root.Mui-selected': {
        backgroundColor: '#0079FF',
      },
    }
  },
  desktopPaper: {
    sx: {
      '.MuiPickersYear-yearButton.Mui-selected':{
        backgroundColor: '#0079FF',
      }
    }
  },
}}

字符串
我找到了这个here。

赞(0）回复(0）举报 5个月前

我来回答

reactjs 如何在MUI X中使用sx prop更改选定年份的背景色？

2条答案

相关问题

热门标签

最新问答