How to customize the color of a checkbox in React Material UI?

Sometimes, we want to customize the color of a checkbox in React Material UI.

In this article, we’ll look at how to customize the color of a checkbox in React Material UI.

How to customize the color of a checkbox in React Material UI?

To customize the color of a checkbox in React Material UI, we can set the style prop to an object with the color we want.

For instance, we write:

import React, { useState } from "react";
import { Checkbox, FormControlLabel, Typography } from "@material-ui/core";

export default function App() {
  const [val, setVal] = useState(false);

  return (
    <div>
      <FormControlLabel
        control={
          <Checkbox
            checked={val}
            onChange={(e) => setVal(e.target.checked)}
            style={{
              color: "#00e676"
            }}
            value="work"
          />
        }
        label={
          <Typography variant="h6" style={{ color: "#2979ff" }}>
            Work
          </Typography>
        }
      />
    </div>
  );
}

We set the style prop of the Checkbox to an object with the color of the checkbox.

Next, we set the label color by setting the style prop to an object with the color of the label.

Conclusion

To customize the color of a checkbox in React Material UI, we can set the style prop to an object with the color we want.