Category: JavaScript

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.

Sometimes, we want to add form validation with React and Material UI.

In this article, we’ll look at how to add form validation with React and Material UI.

How to add form validation with React and Material UI?

To add form validation with React and Material UI, we can set the error prop of the TextField to show the error state when there’s an error.

We can set the helperText prop to show the error message.

For instance, we write:

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

export default function App() {
  const [text, setText] = useState();

  return (
    <div>
      <TextField
        value={text}
        onChange={(event) => setText(event.target.value)}
        error={text === ""}
        helperText={text === "" ? "Empty!" : " "}
      />
    </div>
  );
}

We add a TextField with the value prop set to text to show the inputted text.

And we set the onChange prop to a function that calls setText to set the inputted value as the value of the text prop.

Next, we set the error prop to text === "" to make the input box red when text is an empty string.

Finally, we set the helperText to text === "" ? "Empty!" : " " to check if text is an empty string.

If it is, then we show ‘Empty!`. Otherwise, we show nothing.

Conclusion

To add form validation with React and Material UI, we can set the error prop of the TextField to show the error state when there’s an error.

We can set the helperText prop to show the error message.

Sometimes, we want to use CSS child selectors in React Material UI.

In this article, we’ll look at how to use CSS child selectors in React Material UI.

How to use CSS child selectors in React Material UI?

To use CSS child selectors in React Material UI, we can start the property names of the style properties with &.

For instance, we write:

import React, { useState } from "react";
import {
  makeStyles,
  Paper,
  Table,
  TableHead,
  TableRow,
  TableCell,
  TableBody
} from "@material-ui/core";

const useStyles = makeStyles((theme) => ({
  root: {
    width: "100%",
    marginTop: theme.spacing.unit * 3,
    overflowX: "auto"
  },
  table: {
    minWidth: 700
  },
  deleted: {
    "& td": {
      background: "red"
    }
  }
}));

let id = 0;
function createData(name, calories, fat, carbs, protein) {
  id += 1;
  return { id, name, calories, fat, carbs, protein };
}

const rows = [
  createData("Frozen yoghurt", 159, 6.0, 24, 4.0),
  createData("Ice cream sandwich", 237, 9.0, 37, 4.3),
  createData("Eclair", 262, 16.0, 24, 6.0),
  createData("Cupcake", 305, 3.7, 67, 4.3),
  createData("Gingerbread", 356, 16.0, 49, 3.9)
];

export default function App() {
  const classes = useStyles();

  return (
    <div>
      <Paper className={classes.root}>
        <Table className={classes.table}>
          <TableHead>
            <TableRow>
              <TableCell>Dessert (100g serving)</TableCell>
              <TableCell align="right">Calories</TableCell>
              <TableCell align="right">Fat (g)</TableCell>
              <TableCell align="right">Carbs (g)</TableCell>
              <TableCell align="right">Protein (g)</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {rows.map((row) => {
              return (
                <TableRow key={row.id} className={classes.deleted}>
                  <TableCell component="th" scope="row">
                    {row.name}
                  </TableCell>
                  <TableCell align="right">{row.calories}</TableCell>
                  <TableCell align="right">{row.fat}</TableCell>
                  <TableCell align="right">{row.carbs}</TableCell>
                  <TableCell align="right">{row.protein}</TableCell>
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
      </Paper>
    </div>
  );
}

We have the deleted class styles for the td elements that are in the child of the selector.

We add this with '& td'.

And we set the background to red.

In App, we call useStyles to return the classes.

And we set the className to classes.deleted to TableRow.

As a result, the td elements have the background red since we select the td elements inside the element with class deleted and style them to have a red background.

Conclusion

To use CSS child selectors in React Material UI, we can start the property names of the style properties with &.

Sometimes, we want to get input radio elements to horizontally align in React Material UI.

In this article, we’ll look at how to get input radio elements to horizontally align in React Material UI.

How to get input radio elements to horizontally align in React Material UI?

To get input radio elements to horizontally align in React Material UI, we can add the row prop to the RadioGroup component.

For instance, we write:

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

export default function App() {
  const [value, setValue] = useState();

  return (
    <div>
      <RadioGroup value={value} row onChange={setValue}>
        <FormControlLabel value="true" control={<Radio />} label="Yes" />
        <FormControlLabel value="false" control={<Radio />} label="No" />
      </RadioGroup>
    </div>
  );
}

We add the RadioGroup component with the row prop to disable the choices in a row.

And we set the onChange prop to setValue to set the selected choice as the value of the value state.

Inside RadioGroup, we add the FormControlLabel components and we set the control prop to <Radio /> to render the radio button.

The label prop are set to the values of the labels.

Conclusion

To get input radio elements to horizontally align in React Material UI, we can add the row prop to the RadioGroup component.

Sometimes, we want to import React Material UI icons.

In this article, we’ll look at how to import React Material UI icons.

How to import React Material UI icons?

To import React Material UI icons, we’ve to install the @material-ui/icons package.

Then we can import icons from it.

To install it, we can run npm install @material-ui/icons with NPM or run yarn add @material-ui/icons with Yarn.

Then we can import an icon and render it with:

import React from "react";
import { DeleteForever } from "@material-ui/icons";

export default function App() {
  return (
    <div>
      <DeleteForever />
    </div>
  );
}

We imported the DeleteForever icon with:

import { DeleteForever } from "@material-ui/icons";

And then we rendered it in App with <DeleteForever />.

Conclusion

To import React Material UI icons, we’ve to install the @material-ui/icons package.

Then we can import icons from it.

To install it, we can run npm install @material-ui/icons with NPM or run yarn add @material-ui/icons with Yarn.