Category: React

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.

Sometimes, we want to get the value in the React Material-UI autocomplete.

In this article, we’ll look at how to get the value in the React Material-UI autocomplete.

How to get the value in the React Material-UI autocomplete?

To get the value in the React Material-UI autocomplete, we can get the selected values from the onChange callback.

For instance, we write:

import React from "react";
import { TextField } from "@material-ui/core";
import { Autocomplete } from "@material-ui/lab";

const top5Films = [
  { title: "The Shawshank Redemption", year: 1994 },
  { title: "The Godfather", year: 1972 },
  { title: "The Godfather: Part II", year: 1974 },
  { title: "The Dark Knight", year: 2008 },
  { title: "12 Angry Men", year: 1957 }
];

export default function App() {
  return (
    <div>
      <Autocomplete
        options={top5Films}
        getOptionLabel={(option) => option.title}
        onChange={(event, value) => console.log(value)}
        renderInput={(params) => (
          <TextField {...params} label="Label" variant="outlined" fullWidth />
        )}
      />
    </div>
  );
}

We add the Autocomplete from the @material-ui/lab module.

And we set the options prop to the top5films array to add the options for the autocomplete.

Next, we set getOptionLabel to a function that returns the title property from the object in the options array prop.

To get the value that we selected, we set the onChange prop to a function with the value parameter in the 2nd position.

Finally, we set the render component to a function that renders a TextField to render the input box for the autocomplete.

We spread the params as props of the TextField.

And we set the label and variant to the values we want.

As a result, when we select a value, we should see the selected object in the top5films array logged.

Conclusion

To get the value in the React Material-UI autocomplete, we can get the selected values from the onChange callback.

Sometimes, we want to change font size of text field in React Material UI.

In this article, we’ll look at how to change font size of text field in React Material UI.

How to change font size of text field in React Material UI?

To change font size of text field in React Material UI, we can set the InputProps and the InputLabelProps prop to set the font size of the input box and the input label respectively.

For instance, we write:

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

export default function App() {
  return (
    <div>
      <TextField
        label="label"
        margin="normal"
        InputProps={{ style: { fontSize: 40 } }}
        InputLabelProps={{ style: { fontSize: 40 } }}
      />
    </div>
  );
}

to set InputProps and InputLabelProps to { style: { fontSize: 40 } } so that the input box and the label both have font size 40px.

Conclusion

To change font size of text field in React Material UI, we can set the InputProps and the InputLabelProps prop to set the font size of the input box and the input label respectively.