Category: JavaScript

Sometimes, we want to change a style of a child when hovering over a parent using React Material UI styles.

In this article, we’ll look at how to change a style of a child when hovering over a parent using React Material UI styles.

How to change a style of a child when hovering over a parent using React Material UI styles?

To change a style of a child when hovering over a parent using React Material UI styles, we can call makeStyles with the &:hover selector of the parent element to change the styles when we hover over the child element.

For instance, we write:

import * as React from "react";
import { Grid, makeStyles } from "@material-ui/core";
import AddIcon from "@material-ui/icons/Add";

const useStyles = makeStyles((theme) => ({
  outerDiv: {
    backgroundColor: theme.palette.grey[200],
    padding: theme.spacing(4),
    "&:hover": {
      cursor: "pointer",
      backgroundColor: theme.palette.grey[100],
      "& $addIcon": {
        color: "purple"
      }
    }
  },
  addIcon: () => ({
    height: 50,
    width: 50,
    color: theme.palette.grey[400],
    marginBottom: theme.spacing(2)
  })
}));

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

  return (
    <Grid container>
      <Grid item className={classes.outerDiv}>
        <AddIcon className={classes.addIcon} />
      </Grid>
    </Grid>
  );
}

We call makeStyles with a function that has the outerDiv class property with the "&:hover" property inside it.

We set "&:hover" to a function that changes the background color of the child element.

Also, we have the "& $addIcon" property to set the color of the child element.

Next, we apply the outerDiv class by setting the className prop of Grid to classes.outerDiv.

As a result, when we hover over the Grid, we see that the add icon is purple.

Conclusion

To change a style of a child when hovering over a parent using React Material UI styles, we can call makeStyles with the &:hover selector of the parent element to change the styles when we hover over the child element.

Sometimes, we want to set the default value in React Material-UI select box.

In this article, we’ll look at how to set the default value in React Material-UI select box.

How to set the default value in React Material-UI select box?

To set the default value in React Material-UI select box, we can set the initial value of the state that we use as the Select‘s value prop’s value.

The initial value must match one of the value prop of values of MenuItem.

For instance, we write:

import React from "react";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";

const followers = [
  { "0-50k": [0, 50000] },
  { "50k-100k": [50001, 100000] },
  { "100k-250k": [100001, 250000] },
  { "250k-500k": [250001, 500000] },
  { "500k-750k": [500001, 750000] },
  { "+1M": [750001, Number.MAX_SAFE_INTEGER] }
];

export default function App() {
  const [value, setValue] = React.useState("50k-100k");
  const handleChange = (event) => setValue(event.target.value);

  return (
    <div>
      <Select
        fullWidth
        id="followers"
        labelId="followersL"
        margin="dense"
        displayEmpty
        name="followers"
        onChange={handleChange}
        value={value}
        variant="outlined"
      >
        {followers.map((element) => {
          const [[key]] = Object.entries(element);
          return (
            <MenuItem value={key} key={key}>
              {key}
            </MenuItem>
          );
        })}
      </Select>
    </div>
  );
}

to define the value state with useState.

We set value‘s initial value to "50k-100k".

Next, we set Select‘s value prop to the value state.

Then when we add the MenuItems, we set the value prop of the MenuItem to key so that the 2nd entry matches the initial value of the value prop.

Conclusion

To set the default value in React Material-UI select box, we can set the initial value of the state that we use as the Select‘s value prop’s value.

The initial value must match one of the value prop of values of MenuItem.

Sometimes, we want to fix the select value is always out of range error with React Material UI.

In this article, we’ll look at how to fix the select value is always out of range error with React Material UI.

How to fix the select value is always out of range error with React Material UI?

To fix the select value is always out of range error with React Material UI, we should make sure the value is a primitive value or the same object reference of the object as the selected value.

For instance, we write:

import React from "react";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";

const followers = [
  { "0-50k": [0, 50000] },
  { "50k-100k": [50001, 100000] },
  { "100k-250k": [100001, 250000] },
  { "250k-500k": [250001, 500000] },
  { "500k-750k": [500001, 750000] },
  { "+1M": [750001, Number.MAX_SAFE_INTEGER] }
];

export default function App() {
  const [value, setValue] = React.useState("");
  const handleChange = (event) => setValue(event.target.value);

  return (
    <div>
      <Select
        fullWidth
        id="followers"
        labelId="followersL"
        margin="dense"
        displayEmpty
        name="followers"
        onChange={handleChange}
        value={value}
        variant="outlined"
      >
        {followers.map((element) => {
          const [[key, val]] = Object.entries(element);
          return (
            <MenuItem value={val} key={key}>
              {key}
            </MenuItem>
          );
        })}
      </Select>
    </div>
  );
}

to render the MenuItem by calling followers.map with a function that takes the key and val from each element entry with Object.entries.

Then we set the value prop of MenuItem to val.

And the key is used as the value of the key prop and it’s also displayed as the text of the choice to the user.

Then to get the selected value and display it, we set the onChange prop to handleChange and the value prop to value.

We call setValue with event.target.value in handleChange to set the value state to the selected choice, which is the MenuItem‘s value prop’s value.

Conclusion

To fix the select value is always out of range error with React Material UI, we should make sure the value is a primitive value or the same object reference of the object as the selected value.

Sometimes, we want to style text inside the ListItemText component with React Material UI.

In this article, we’ll look at how to style text inside the ListItemText component with React Material UI.

How to style text inside the ListItemText component with React Material UI?

To style text inside the ListItemText component with React Material UI, we can use the Typography component.

For instance, we write:

import 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 Typography from "@material-ui/core/Typography";

export default function App() {
  return (
    <div>
      <List dense>
        <ListItem>
          <ListItemText
            primary={
              <Typography variant="h1" style={{ color: "green" }}>
                hello world
              </Typography>
            }
          />
        </ListItem>
      </List>
    </div>
  );
}

We set the primary prop of the ListItemText component to the Typography component to let us custom the text styles.

We set the variant prop to the tag name of the element we want to render.

And we set the style prop to the styles we want for the text.

As a result, we should see a h1 element rendered with the text being ‘hello world’ and the text is green.

Conclusion

To style text inside the ListItemText component with React Material UI, we can use the Typography component.

To make a React Material UI Raised Button link to an external URL, we can add a Button that has the variant prop set to contained.

Then we set the href prop of the button to the URL we want to go to.

For instance, we write:

import React from "react";
import Button from "@material-ui/core/Button";
export default function App() {
  return (
    <div>
      <Button variant="contained" href="https://example.com">
        Yahoo
      </Button>
    </div>
  );
}

to add a Button with the variant prop set to 'contained' to add a raised button.

And we set the href prop to 'https://example.com' to make the button go to https://example.com when we click it.