Category: React

Sometimes, we want to change the color of Select component’s border and arrow icon with React Material UI.

In this article, we’ll look at how to change the color of Select component’s border and arrow icon with React Material UI.

How to change the color of Select component’s border and arrow icon with React Material UI?

To change the color of Select component’s border and arrow icon with React Material UI, we can use the '&:before' and '&:after' selectors and apply the styles for them.

For instance, we write:

import * as React from "react";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import { makeStyles } from "@material-ui/core/styles";

const color = "red";
const useStyles = makeStyles(() => ({
  select: {
    "&:before": {
      borderColor: color
    },
    "&:after": {
      borderColor: color
    }
  },
  icon: {
    fill: color
  }
}));

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

  return (
    <div>
      <Select
        value="1"
        className={classes.select}
        inputProps={{
          classes: {
            icon: classes.icon
          }
        }}
      >
        <MenuItem value="1"> Foo 1</MenuItem>
        <MenuItem value="2"> Foo 2</MenuItem>
      </Select>
    </div>
  );
}

We call makeStyles with a function that returns an object with the select property set to an object with the drop down styles.

We set the borderColor style of the '&:before' and '&:after' selector to set the color of the border of the select.

Next, we selector the icon class and set the fill CSS property to color to set the color of the drop down arrow.

Then we call useStyles to return the classes, which we apply by setting the className of the Select to classes.select to set the bottom border color of the Select.

And we set the inputProps to an object with the icon property set to classes.icon to make the drop down arrow red.

Conclusion

To change the color of Select component’s border and arrow icon with React Material UI, we can use the '&:before' and '&:after' selectors and apply the styles for them.

Sometimes, we want to make a horizontal list with React Material UI.

In this article, we’ll look at how to make a horizontal list with React Material UI.

How to make a horizontal list with React Material UI?

To make a horizontal list with React Material UI, we can set the style of the List to have the display CSS property set to 'flex'.

For instance, we write:

import * as React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex",
    flexDirection: "row",
    padding: 0
  }
}));

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

  return (
    <div>
      <List className={classes.root}>
        <ListItem>
          <ListItemText primary="foo1" secondary="bar1" />
        </ListItem>
        <ListItem>
          <ListItemText primary="foo2" secondary="bar2" />
        </ListItem>
      </List>
    </div>
  );
}

We call makeStyles with a function that returns an object with the root class.

The root class property is set to an object that has the display property set to 'flex'.

This will make the list items display horizontally.

Next, we add the List into App.

And we add the ListItems into it.

Finally, we add ListItemText into the ListItems to add some text into each item.

Conclusion

To make a horizontal list with React Material UI, we can set the style of the List to have the display CSS property set to 'flex'.

Sometimes, we want to set Typography text color in React Material UI.

In this article, we’ll look at how to set Typography text color in React Material UI.

How to set Typography text color in React Material UI?

To set Typography text color in React Material UI, we can set the color and variant props.

For instance, we write:

import * as React from "react";
import Typography from "@material-ui/core/Typography";

export default function App() {
  return (
    <div>
      <Typography gutterBottom variant="h2" component="h2" color="secondary">
        hello world
      </Typography>
    </div>
  );
}

We set the variant prop to set the size of the text.

component sets the component to render the text as.

The color prop sets the color.

As a result, we should see large red text displayed on screen.

Conclusion

To set Typography text color in React Material UI, we can set the color and variant props.

Sometimes, we want to horizontally center an item in React Material UI Grid item.

In this article, we’ll look at how to horizontally center an item in React Material UI Grid item.

How to horizontally center an item in React Material UI Grid item?

To horizontally center an item in React Material UI Grid item, we can use flexbox to justify and align the content in the center position.

For instance, we write:

import * as React from "react";
import Grid from "@material-ui/core/Grid";

export default function App() {
  return (
    <div>
      <Grid container align="center" justify="center" alignItems="center">
        <Grid item xs={false} sm={4} md={6}>
          foo
        </Grid>
        <Grid item xs={12} sm={4} md={6}>
          bar
        </Grid>
      </Grid>
    </div>
  );
}

We add the container prop to the outer Grid to make it a flex container.

We set the align prop to 'center' to center align items vertically.

And we set the justify prop to 'center' to center items horizontally.

Then we add Grids inside the outer Grid to add content into the container Grid.

Conclusion

To horizontally center an item in React Material UI Grid item, we can use flexbox to justify and align the content in the center position.

Sometimes, we want to make a React Material UI TableRow column span multiple columns.

In this article, we’ll look at how to make a React Material UI TableRow column span multiple columns.

How to make a React Material UI TableRow column span multiple columns?

To make a React Material UI TableRow column span multiple columns, we set the colSpan prop of the TableCell component.

For instance, we write:

import * as React from "react";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableRow from "@material-ui/core/TableRow";
import TableCell from "@material-ui/core/TableCell";

export default function App() {
  return (
    <div>
      <Table>
        <TableBody>
          <TableRow>
            <TableCell>Data 1</TableCell>
            <TableCell>Data 2</TableCell>
          </TableRow>
          <TableRow>
            <TableCell colSpan={2}>Data Two Columns</TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </div>
  );
}

We set the colSpan of the TableCell in the 2nd TableRow to 2.

As a result, the cell should span 2 columns instead of 1.

Conclusion

To make a React Material UI TableRow column span multiple columns, we set the colSpan prop of the TableCell component.