Category: JavaScript

Sometimes, we want to use theme and props in React Material UI makeStyles.

In this article, we’ll look at how to use theme and props in React Material UI makeStyles.

How to use theme and props in React Material UI makeStyles?

To use theme and props in React Material UI makeStyles, we call it with a function that returns the styles.

We can get preset styles of the theme from the theme parameter.

And we can set the class property to a function that has props as the parameter and return an object with the style values given the props.

For instance, we write:

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

const useStyles = makeStyles((theme) => ({
  mySelector: (props) => ({
    display: "block",
    width: props.width,
    height: props.height,
    marginTop: theme.spacing(2),
    marginBottom: theme.spacing(2),
    backgroundColor: "yellow"
  })
}));

const MyComponent = () => {
  const styleProps = { width: "100px", height: "100px" };
  const classes = useStyles(styleProps);

  return <div className={classes.mySelector}>hello world</div>;
};

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

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

We set mySelector to a function that takes the props parameter and returns a style object.

We set the width to props.width, height to props.height.

And we set the margins to theme.spacing(2).

Then in MyComponent, we call useStyles with styleProps to set the dimensions of the div.

As a result, we should see the div displayed as a square.

Conclusion

To use theme and props in React Material UI makeStyles, we call it with a function that returns the styles.

We can get preset styles of the theme from the theme parameter.

And we can set the class property to a function that has props as the parameter and return an object with the style values given the props.

Sometimes, we want to override the width of a TextField component with React Material UI.

In this article, we’ll look at how to override the width of a TextField component with React Material UI.

How to override the width of a TextField component with React Material UI?

To override the width of a TextField component with React Material UI, we can add the fullWidth prop to it.

For instance, we write:

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

export default function App() {
  return (
    <div>
      <TextField
        label="Label"
        placeholder="Placeholder"
        helperText="Full width!"
        margin="normal"
        fullWidth
      />
    </div>
  );
}

We set the fullWidth prop to true to make the TextField fill the parent container.

Conclusion

To override the width of a TextField component with React Material UI, we can add the fullWidth prop to it.

Sometimes, we want to style React Material UI tooltip.

In this article, we’ll look at how to style React Material UI tooltip.

How to style React Material UI tooltip?

To style React Material UI tooltip, we can use the makeStyles function.

For instance, we write:

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

import Tooltip from "@material-ui/core/Tooltip";
import Button from "@material-ui/core/Button";
import DeleteIcon from "@material-ui/icons/Delete";

const useStyles = makeStyles(() => ({
  customTooltip: {
    backgroundColor: "rgba(220, 0, 78, 0.8)"
  },
  customArrow: {
    color: "rgba(220, 0, 78, 0.8)"
  }
}));

const TooltipExample = () => {
  const classes = useStyles();

  return (
    <>
      <Tooltip
        classes={{
          tooltip: classes.customTooltip,
          arrow: classes.customArrow
        }}
        title="Delete"
        arrow
      >
        <Button color="secondary">
          <DeleteIcon />
        </Button>
      </Tooltip>
    </>
  );
};

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

We call makeStyles with a function that returns an object that has some classes with some styles.

We set the background color and the color in the classes.

Next, in the TooltipExample component, we set the classes prop to an object with class names as the properties.

We set the classes for the tooltip and arrow separately.

Finally, we add the Button and DeleteIcon so that we see the tooltip when we hover over the button.

As a result, the tooltip has a red background and white text.

Conclusion

To style React Material UI tooltip, we can use the makeStyles function.

Sometimes, we want to handle change on Autocomplete component from React Material UI.

In this article, we’ll look at how to handle change on Autocomplete component from React Material UI.

How to handle change on Autocomplete component from React Material UI?

To handle change on Autocomplete component from React Material UI, we set the onChange prop of the Autocomplete to a function that has the value as the 2nd parameter.

And we can set the value prop to the state that we called the state setter function to set the value for.

For instance, we write:

import React, { useState } 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() {
  const [movie, setMovie] = useState(top5Films[0]);

  return (
    <div>
      <Autocomplete
        value={movie}
        options={top5Films}
        getOptionLabel={(option) => option.title}
        onChange={(event, value) => setMovie(value)}
        renderInput={(params) => (
          <TextField {...params} label="Label" variant="outlined" fullWidth />
        )}
      />
    </div>
  );
}

We have the top5films array which we use as the value of the options prop.

And we set the value to the movie state to show the selected value.

Next, we set the getOptionLabel to a function that returns the property value to show in the top5Films array.

Then we set the onChange prop to a function that calls setMovie with value to set movie to the selected option.

Finally, we set the renderInput to a function that renders a TextField to render the text field.

As a result, we see that ‘The Shawshank Redemption’ is set initially.

And when we select another choice, we see the selected choice displayed.

Conclusion

To handle change on Autocomplete component from React Material UI, we set the onChange prop of the Autocomplete to a function that has the value as the 2nd parameter.

And we can set the value prop to the state that we called the state setter function to set the value for.

Sometimes, we need to fix the ‘A component is changing a controlled input of type text to be uncontrolled’ error with the React Material UI select component.

In this article, we’ll look at how to fix the ‘A component is changing a controlled input of type text to be uncontrolled’ error with the React Material UI select component.

How to fix the ‘A component is changing a controlled input of type text to be uncontrolled’ error with the React Material UI select component?

To fix the ‘A component is changing a controlled input of type text to be uncontrolled’ error with the React Material UI select component, we can set the default value for the value prop.

For instance, we write:

import React, { useState } from "react";
import { FormControl, InputLabel, Select, MenuItem } from "@material-ui/core";

export default function App() {
  const [age, setAge] = useState();

  return (
    <div>
      <FormControl fullWidth>
        <InputLabel>Age</InputLabel>
        <Select
          value={age ?? 10}
          label="Age"
          onChange={(e) => setAge(e.target.value)}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
}

We set the value prop of the Select component to the age state.

And we set the value to 10 if age is undefined.

Next, we add the onChange prop and set it to a function to set the age state to the selected value.

And we add some MenuItems inside the Select component to add some choices.

Conclusion

To fix the ‘A component is changing a controlled input of type text to be uncontrolled’ error with the React Material UI select component, we can set the default value for the value prop.