如何更改日期选择器MUI中日历图标的颜色

问题描述 投票:0回答:2
reactjs colors material-ui material-design
2个回答
0
投票

你瞄准了错误的元素

MuiButtonBase
应该可以解决问题

style: {
"& .MuiButtonBase-root": {
  color: "orange",
},

0
投票

这对我有用。您也可以查看此页面以供参考: https://mui.com/x/react-date-pickers/custom-components/#component-2 代码:

                              <DesktopDatePicker
                                name="Date_Of_Birth"
                                format="DD/MM/YYYY"
                                inputFormat="DD/MM/YYYY"
                                value={value}
                                onChange={(newValue) => {
                                  setValue(newValue);
                                }}
                                renderInput={(params) => (
                                  <TextField
                                    {...params}
                                    fullWidth
                                  />
                                )}
                                slotProps={{
                                  inputAdornment: {
                                    position: "end",
                                  },
                                  // To change icon styles
                                  openPickerIcon: {
                                    sx: {
                                      color: "#f05736",
                                    },
                                  },
                                }}
                                // To change Icon Image
                                slots={{
                                   openPickerIcon: () => (
                                     <img
                                       src={DateIcon}
                                       alt="date-icon"
                                       style={{ cursor: "pointer" }}
                                       onClick={() => setOpen(true)}
                                     />
                                   ),
                                 }}
                              />
© www.soinside.com 2019 - 2024. All rights reserved.