Breaking News: Grepper is joining You.com. Read the official announcement!

reusable component style mui

Hajar Mekamy answered on August 5, 2022 Popularity 3/10 Helpfulness 1/10

answer reusable component style mui

related reusable component style mui

reusable component style mui

Comment

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} />;
}

Popularity 3/10 Helpfulness 1/10 Language javascript

Source: mui.com

Tags: javascript mui

Link to this answer
Share Copy Link

Contributed on Aug 05 2022

Hajar Mekamy

0 Answers Avg Quality 2/10

Closely Related Answers

reusable component style mui

Comment

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

const StyledSlider = styled(Slider, {
  shouldForwardProp: (prop) => prop !== 'success',
})(({ success, theme }) => ({
  width: 300,
  ...(success && {
    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 DynamicCSS() {
  const [success, setSuccess] = React.useState(false);

  const handleChange = (event) => {
    setSuccess(event.target.checked);
  };

  return (
    <React.Fragment>
      <FormControlLabel
        control={
          <Switch
            checked={success}
            onChange={handleChange}
            color="primary"
            value="dynamic-class-name"
          />
        }
        label="Success"
      />
      <StyledSlider success={success} defaultValue={30} sx={{ mt: 1 }} />
    </React.Fragment>
  );
}

Popularity 3/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: javascript mui

Link to this answer
Share Copy Link

Contributed on Aug 05 2022

Hajar Mekamy

0 Answers Avg Quality 2/10

reusable component style mui

Contents

More Related Answers

reusable component style mui

Closely Related Answers

reusable component style mui

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.