How do I customize a style using mui5 styled ?

[ygqygq2]

I use it like this, but not work, How do I customize a style using mui5 styled ?

import ReactDatePicker from 'react-datepicker';

import { styled } from '@mui/material/styles';
import { alpha } from '@mui/system/colorManipulator';
import 'react-datepicker/dist/react-datepicker.css';

export const Datepicker = styled(ReactDatePicker)(({ theme }) => ({
  '& .react-datepicker': {
    fontSize: '0.8rem',
    backgroundColor: theme.palette.background.paper,
    color: 'red',
    border: '1px solid #aeaeae',
    borderRadius: '0.3rem',
  },

[ygqygq2]

Resolved.

import { FC } from 'react';
import ReactDatePicker from 'react-datepicker';
import type { ReactDatePickerProps } from 'react-datepicker';

import { useTheme } from '@mui/material';
import GlobalStyles from '@mui/material/GlobalStyles';
import 'react-datepicker/dist/react-datepicker.css';

interface DatepickerProps extends ReactDatePickerProps {}

export const Datepicker: FC<DatepickerProps> = (props) => {
  const theme = useTheme();

  return (
    <>
      <GlobalStyles
        styles={{
          '.react-datepicker': {
          },
          '& .react-datepicker__current-month': {
            backgroundColor: theme.palette.primary.main,
          },
        }}
      />
      <ReactDatePicker {...props} />
    </>
  );
};