如何减小MUI StaticDatePicker组件中日期及星期文本的字体大小？

你的问题在于直接在sx中使用类选择器时，没有通过&关联当前组件的根元素，导致样式优先级不足，无法覆盖MUI默认样式。以下是几种可行的解决方案：

方法一：使用&嵌套选择器提升优先级 #

在sx中通过&指向当前组件的后代元素，确保样式作用到StaticDatePicker内部的日期文本上：

import { Box } from "@mui/material";
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { StaticDatePicker} from '@mui/x-date-pickers/StaticDatePicker';

const DateCalander = () => {
    return (
        <Box sx={{ bgcolor: 'white', borderRadius: 3 }}>
            <LocalizationProvider dateAdapter={AdapterDayjs}>
                <StaticDatePicker  
                    sx={{
                        width: '500px', 
                        height: '300px',
                        // 修改日期数字的字体大小
                        '& .MuiDayPicker-Day': {
                            fontSize: '10px'
                        },
                        // 修改星期标题的字体大小
                        '& .MuiDayPicker-WeekDay': {
                            fontSize: '10px'
                        },
                        // 修改年月标题的字体大小
                        '& .MuiPickersCalendarHeader-label': {
                            fontSize: '12px'
                        }
                    }}       
                />
            </LocalizationProvider>
        </Box>
    );
};

export default DateCalander;

方法二：通过slotProps精准定制内部组件 #

利用StaticDatePicker的slotProps属性，直接给内部的日历、头部组件单独设置样式：

import { Box } from "@mui/material";
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { StaticDatePicker} from '@mui/x-date-pickers/StaticDatePicker';

const DateCalander = () => {
    return (
        <Box sx={{ bgcolor: 'white', borderRadius: 3 }}>
            <LocalizationProvider dateAdapter={AdapterDayjs}>
                <StaticDatePicker  
                    sx={{ width: '500px', height: '300px' }}
                    slotProps={{
                        // 定制日历区域的样式
                        calendar: {
                            sx: {
                                '& .MuiDayPicker-Day': { fontSize: '10px' },
                                '& .MuiDayPicker-WeekDay': { fontSize: '10px' }
                            }
                        },
                        // 定制头部年月标题的样式
                        header: {
                            sx: {
                                '& .MuiPickersCalendarHeader-label': { fontSize: '12px' }
                            }
                        }
                    }}
                />
            </LocalizationProvider>
        </Box>
    );
};

export default DateCalander;

方法三：全局主题覆盖（适合多组件复用场景） #

如果需要在多个StaticDatePicker中统一字体样式，可以通过自定义MUI主题实现全局覆盖：

import { Box } from "@mui/material";
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { StaticDatePicker} from '@mui/x-date-pickers/StaticDatePicker';

// 自定义主题
const customTheme = createTheme({
    components: {
        MuiDayPicker: {
            styleOverrides: {
                day: { fontSize: '10px' },
                weekDayLabel: { fontSize: '10px' }
            }
        },
        MuiPickersCalendarHeader: {
            styleOverrides: {
                label: { fontSize: '12px' }
            }
        }
    }
});

const DateCalander = () => {
    return (
        <ThemeProvider theme={customTheme}>
            <Box sx={{ bgcolor: 'white', borderRadius: 3 }}>
                <LocalizationProvider dateAdapter={AdapterDayjs}>
                    <StaticDatePicker sx={{ width: '500px', height: '300px' }} />
                </LocalizationProvider>
            </Box>
        </ThemeProvider>
    );
};

export default DateCalander;

关键说明 #

• MUI组件的默认样式优先级较高，必须确保自定义样式的优先级足够（通过&嵌套或主题覆盖）才能生效。
• 上述示例覆盖了日期数字、星期标题、年月标题的字体大小，你可以根据需求调整对应选择器的样式。

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