CODEWITHSUNDEEP
cssreactjsmaterial-ui
salesforce ninja
salesforce ninja

Reputation: 21

Styling the DatePicker from MUI

I'm using a DatePicker component from Mui Lab and I am trying to style the Calendar component by adding some border or background color. I used the PaperProps prop for DatePicker but it's not styling it. Trying to understand why I cant just use an SX prop for it

this is the calendar where i want to add a border to

import PropTypes from 'prop-types';
import { TextField } from '@material-ui/core';
import { alpha } from '@material-ui/core/styles';
import DatePicker from '@material-ui/lab/DatePicker';
import { AppBorderStyle } from '../theme';

export const DateField = (props) => {
  const {
    error,
    fullWidth,
    helperText,
    label,
    onChange,
    onBlur,
    placeholder,
    disabled,
    value,
    name,
    ...other
  } = props;

  return (
    <DatePicker
      PopperProps={{
        sx: {
          '& .MuiPaper-root': {
            backgroundColor: 'red',
            border: '1px solid black',
          }
        }
      }}
      onChange={onChange}
      renderInput={({ InputProps, ...rest }) => (
        <TextField
          {...rest}
          disabled={disabled}
          onBlur={onBlur}
          name={name}
          error={error}
          fullWidth={fullWidth}
          helperText={helperText}
          label={label}
          placeholder={placeholder}
          sx={{
            '& .MuiFilledInput-root': {
              backgroundColor: 'background.paper',
              borderRadius: 1,
              border: AppBorderStyle,
              px: 1.5,
              py: 0.75,
              transition: (theme) => theme.transitions.create([
                'border-color',
              ]),
              '&:hover': {
                backgroundColor: 'background.paper'
              },
              '&.Mui-focused': {
                backgroundColor: 'background.paper',
                boxShadow: (theme) => `${alpha(theme.palette.primary.main,
                  0.25)} 0 0 0 0.2rem`
              },
              '& .MuiFilledInput-input': {
                fontSize: 14,
                height: 'unset',
                lineHeight: 1.6,
                p: 0
              },
              '&.Mui-disabled': {
                backgroundColor: 'action.disabledBackground',
                boxShadow: 'none',
                borderColor: alpha('#D6DBE1', 0.5)
              }
            }
          }}
          variant="filled"
          InputProps={{
            disableUnderline: true,
            ...InputProps
          }}
          InputLabelProps={{
            shrink: true,
            sx: {
              color: 'text.primary',
              fontSize: 14,
              fontWeight: 500,
              mb: 0.5,
              position: 'relative',
              transform: 'none'
            }
          }}
        />
      )}
      value={value}
      {...other}
    />
  );
};

DateField.defaultProps = {
  disabled: false,
};

DateField.propTypes = {
  disabled: PropTypes.bool,
  error: PropTypes.bool,
  fullWidth: PropTypes.bool,
  helperText: PropTypes.string,
  label: PropTypes.string,
  name: PropTypes.string,
  onChange: PropTypes.func.isRequired,
  onBlur: PropTypes.func.isRequired,
  placeholder: PropTypes.string,
  value: PropTypes.instanceOf(Date)
};

Upvotes: 2

Views: 21957

Answers (3)

xoloescuincle
xoloescuincle

Reputation: 61

The way you do this as of MUI v5.15.xx Add the slotProps attribute to the DatePicker component like so:

slotProps={{
  popper: {
       sx: {
            ...{'& .MuiPickersDay-root.Mui-selected': { backgroundColor: 'red' }}
       }
  }
}}

What did it for me was using that spread operator, so that way it inherits all previous styles and then you override whatever you need. In this specific case the 'selected day' will be displayed red. without spread I would get a TypeScript and compile error.

Upvotes: 0

Peter Yamamoto
Peter Yamamoto

Reputation: 41

Update, that's how you do it on mui v5:

slotProps={{
      popper: {
        sx: {
          ".MuiPaper-root": { border: "1px solid blue", borderRadius: "10px" },
        },
      },
    }}

Upvotes: 4

Simran Singh
Simran Singh

Reputation: 2889

I noticed you're using depecrated version of mui as you can check here. For newer versions of material UI components, we import material components from @mui and not from @material-ui.

I'm not sure if the classes are the same in your version or not. But the issue for your case looks like you are targeting the wrong class to add a border. You need to target MuiPickersPopper-root class to change the border.

PopperProps={{
        sx: {'&.MuiPickersPopper-root': {border: '4px solid red'},},
      }}

I created a solution of DatePicker with the border here. Cheers!

Upvotes: 4

Related Questions