MUI v5 で追加されたスタイリング用ユーティリティ styled() を触ってみた

import * as React from 'react';
import Slider from '@mui/material/Slider';
import { alpha, styled } from '@mui/material/styles';

const SuccessSlider = styled(Slider)(({ theme }) => ({
  width: 300,
  color: theme.palette.success.main,
  '& .MuiSlider-thumb': {
    '&:hover, &.Mui-focusVisible': {
      boxShadow: `0px 0px 0px 8px ${alpha(theme.palette.success.main, 0.16)}`,
    },
    '&.Mui-active': {
      boxShadow: `0px 0px 0px 14px ${alpha(theme.palette.success.main, 0.16)}`,
    },
  },
}));

export default function StyledCustomization() {
  return <SuccessSlider defaultValue={30} />;
}

import * as React from 'react';
import { styled } from '@mui/system';

const MyComponent = styled('div')({
  color: 'darkslategray',
  backgroundColor: 'aliceblue',
  padding: 8,
  borderRadius: 4,
});

export default function BasicUsage() {
  return <MyComponent>Styled div</MyComponent>;
}

import { OutlinedInput, withStyles } from "@material-ui/core/";

const StyleOutlinedInput = withStyles({
  root: {
    "&$focused": {
      "& $notchedOutline": {
        borderColor: "red",
        borderWidth: "2px"
      }
    }
  },
  notchedOutline: {
    borderColor: "grey"
  },
  multiline: {
    padding: "8px 11px 9px"
  },
  focused: {}
})(OutlinedInput);

export function TextArea(): JSX.Element {
  return <StyleOutlinedInput multiline />;
}

import { OutlinedInput } from "@material-ui/core/";
import { styled } from "@mui/system";

const StyledOutlinedInput = styled(OutlinedInput)(() => ({
  "&.MuiOutlinedInput-multiline": {
    padding: "8px 11px 9px"
  },
  "& .MuiOutlinedInput-notchedOutline": {
    borderColor: "grey"
  },
  "&.Mui-focused": {
    "& .MuiOutlinedInput-notchedOutline": {
      borderColor: "red",
      borderWidth: "2px"
    }
  }
}));

export function TextArea(): JSX.Element {
  return (
    <StyledOutlinedInput multiline />
  );
}