MUI-Cheatsheet2022-04-18 12:19Material UI, MUI

Style Customization

https://mui.com/material-ui/guides/interoperability/#css-modules

Styled

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

const CustomizedSlider = styled(Slider)`
  color: #20b2aa;

  :hover {
    color: #2e8b57;
  }
`;

export default function StyledComponents() {
  return <CustomizedSlider defaultValue={30} />;
}

With theme object

const CustomizedSlider = styled(Slider)(
  ({ theme }) => `
  color: ${theme.palette.primary.main};

  :hover {
    color: ${darken(theme.palette.primary.main, 0.2)};
  }
`,
);

With Breakpoints


/* make sure you are using pure CSS tring but not JSS. */
const Jumbotron = styled(Box)(({ theme }) => {
  return `
    background-image: url(${background});
    background-size: cover;
    background-position: center;
    ${theme.breakpoints.down("md")} {
      height: 20vh;  /* <- remember to delete the trailing comma (,) from JSS */
    }
    height: 40vh;  /* <- remember to delete the quotation marks (") from JSS */
    width: 100%;
    background-repeat: no-repeat;
    margin-bottom: 2rem;
    
  `;
});

With Props

import * as React from 'react';
import { styled } from '@mui/material/styles';
import Button from '@mui/material/Button';
import Tooltip from '@mui/material/Tooltip';

const StyledTooltip = styled(({ className, ...props }) => (
  <Tooltip {...props} classes={{ popper: className }} />
))`
  & .MuiTooltip-tooltip {
    background: navy;
  }
`;

JSS

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

const SuccessSlider = styled(Slider)<SliderProps>(({ 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} />;
}

With Props

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

interface StyledSliderProps extends SliderProps {
  success?: boolean;
}

const StyledSlider = styled(Slider, {
  shouldForwardProp: (prop) => prop !== 'success',
})<StyledSliderProps>(({ success, theme }) => ({
  ...(success &&
    {
      // the overrides added when the new prop is used
    }),
}));

Jest

Get Inputbox

    const input = within(getByTestId('filter-name')).getByRole('textbox');
Powered by Remix
|
Designed by szhshp
|
Copyright © szhshp 2022