Skip to main content

CSS

Like any component, if you want to override a component's styles using custom classes, you can use the className prop.

<MuiColorInput className="my-class-name" />

Then, you can use the differents global class names (see below) to target an element of MuiColorInput.

Global classDescription
.MuiColorInput-TextFieldStyles applied to the root element.
.MuiColorInput-ButtonStyles applied to the Button component
.MuiColorInput-PopoverStyles applied to the Popover component
.MuiColorInput-ColorSpaceStyles applied to the ColorSpace component
.MuiColorInput-HueSliderStyles applied to the Hue Slider
.MuiColorInput-AlphaSliderStyles applied to the Alpha Slider

For example: target the .MuiColorInput-HueSlider global class name to customize the Hue Slider.

Example with styled-component / emotion​

import { styled } from 'styled-component'; // or emotion
import { MuiColorInput } from 'mui-color-input';

const MuiColorInputStyled = styled(MuiColorInput)`
  & .MuiColorInput-AlphaSlider {
    margin-top: 10px;
  }
`;

function MyComponent() {
  return <MuiColorInputStyled />;
}