英文:
How can I change size and color of clicked value at DateCalender MUI
问题
You can change the size and color of the circle when it's clicked by modifying the CSS styles. Specifically, you can target the .MuiPickersDay-daySelected class for styling the selected day. Here's an example of how you can adjust the size and color:
.MuiPickersDay-daySelected {
background-color: #your-color; /* Change to your desired color */
width: your-width; /* Change to your desired width */
height: your-height; /* Change to your desired height */
border-radius: 50%; /* Makes it a circle */
}
Replace #your-color, your-width, and your-height with your preferred color, width, and height values.
Please add these styles within your CustomDateCalendar component's styled component where you've defined other styles.
英文:
I am tring to change size and color of clicked value at DateCalender MUI, and the Below is part of my code.
const Calendars = ({state}: {state: StateData;}) => {
const CustomDateCalendar = styled(DateCalendar)`
.MuiPickersCalendarHeader-root {
display: none;
}
.MuiPickersDay-dayWithMargin {
margin-top: -15px;
},
.MuiPickersDay-dayOutsideMonth{
margin: 30px;
}
.css-i5q14k-MuiDayCalendar-header{
margin-top: 20px;
}
`;
return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<ThemeProvider theme={customTheme}>
<CustomDateCalendar
defaultCalendarMonth={dayjs('2023-06-01')}
disablePast = {false}
views={['day']}
disableFuture = {false}
maxDate = {dayjs('2023-06-30')}
minDate = {dayjs('2023-06-12')}
sx={{
marginTop:"85px",
marginLeft:"1px",
height:"180px",
width: "326px",
border: "1px solid #EFEFEF",
backgroundColor:"white",
}}
/>
</ThemeProvider>
</LocalizationProvider>
)
How can I change the size of circled which is colored blue when it clicked?
答案1
得分: 1
以下是代码的中文翻译：
const Calendars = ({ state }: { state: StateData; }) => {
const CustomDateCalendar = styled(DateCalendar)`
// 你的样式
`;
return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<ThemeProvider theme={customTheme}>
<CustomDateCalendar
// 你的属性
sx={{
// 你的样式
'& .MuiPickersDay-root.Mui-selected': {
bgcolor: 'red !important',
width: 40, height: 40,
}
}}
/>
</ThemeProvider>
</LocalizationProvider>
);
}
你可以点击此链接查看完整代码：
英文:
const Calendars = ({state}: {state: StateData;}) => {
const CustomDateCalendar = styled(DateCalendar)`
// your styles
`;
return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<ThemeProvider theme={customTheme}>
<CustomDateCalendar
// your props
sx={{
// your sx
'& .MuiPickersDay-root.Mui-selected': {
bgcolor: 'red !important',
width: 40, height: 40,
}
}}
/>
</ThemeProvider>
</LocalizationProvider>
)
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论