Category: JavaScript

Sometimes, we want to style components using makeStyles and still have lifecycle methods in Material UI.

In this article, we’ll look at how to style components using makeStyles and still have lifecycle methods in Material UI.

How to style components using makeStyles and still have lifecycle methods in Material UI?

To style components using makeStyles and still have lifecycle methods in Material UI, we should use the withStyles higher order component.

For instance, we write:

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

const styles = (theme) => ({
  root: {
    background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
    border: 0,
    borderRadius: 3,
    boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)",
    color: "white",
    height: 48,
    padding: "0 30px"
  }
});

class SpecialButton extends React.Component {
  render() {
    const { classes } = this.props;
    return <Button className={classes.root}>hello world</Button>;
  }
}

const StyledButton = withStyles(styles)(SpecialButton);

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

We create the styles function that returns an object with the styles we want to apply when we apply the classes.root class.

Next, we create the SpecialButton component that takes the classes prop that’s injected with the withStyles higher-order component and the styles function.

And then we set className of the button to classes.root to set the class attribute of the button to root.

Finally, we rendered the StyledButton that’s created with withStyles in App.

As a result, we should see a button with gradients on the screen.

Conclusion

To style components using makeStyles and still have lifecycle methods in Material UI, we should use the withStyles higher order component.

Sometimes, we want to add multiple classes in React Material UI using the classes props.

In this article, we’ll look at how to add multiple classes in React Material UI using the classes props.

How to add multiple classes in React Material UI using the classes props?

To add multiple classes in React Material UI using the classes props, we can use the classnames package.

To install it, we run:

npm i classnames

Then we can use it by writing:

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

const useStyles = makeStyles({
  container: {
    color: "blue"
  },
  yellow: {
    backgroundColor: "yellow"
  }
});

export default function App() {
  const classes = useStyles();
  return (
    <div className={classNames(classes.container, classes.yellow)}>
      hello world
    </div>
  );
}

We call makeStyles with an object with the class names as the property names.

And we set each property to an object with the CSS styles as the value.

Next, we call useStyles to return the classes object.

And then we call classnames with the 2 classes properties that we created with makeStyles.

As a result, we should see that the text is blue and the background color is yellow.

Conclusion

To add multiple classes in React Material UI using the classes props, we can use the classnames package.

Sometimes, we want to disable a button when an input is empty with React.

In this article, we’ll look at how to disable a button when an input is empty with React.

How to disable a button when an input is empty with React?

To disable a button when an input is empty with React, we can set the input’s value as a state’s value.

Then we can use the state to conditionally disable the button when the state’s value is empty.

For instance, we write:

import React, { useState } from "react";

export default function App() {
  const [name, setName] = useState();

  return (
    <div>
      <input onChange={(e) => setName(e.target.value)} />
      <button disabled={!name}>save</button>
    </div>
  );
}

to create the name state with the useState hook.

Then we add a text input element with its onChange prop set to a function that calls setName to set the input’s value as name‘s value.

e.target.value has the value of the input box.

Next, we add a button with the disabled prop set to !name to disable the button when the input box is empty.

Conclusion

To disable a button when an input is empty with React, we can set the input’s value as a state’s value.

Then we can use the state to conditionally disable the button when the state’s value is empty.

Sometimes, we want to use radio buttons in React.

In this article, we’ll look at how to use radio buttons in React.

How to use radio buttons in React?

To use radio buttons in React, we can set a state to the selected radio button’s value attribute value.

For instance, we write:

import React, { useState } from "react";

export default function App() {
  const [gender, setGender] = useState();
  console.log(gender);

  return (
    <div>
      <input
        type="radio"
        value="male"
        name="gender"
        onChange={(e) => setGender(e.target.value)}
      />
      Male
      <input
        type="radio"
        value="female"
        name="gender"
        onChange={(e) => setGender(e.target.value)}
      />
      Female
    </div>
  );
}

We add 2 radio buttons by adding input elements.

And we set the name attribute of them to the same value to put them in the same group.

Next, we set the onChange prop of each radio input to a function that calls the setGender function to set gender to the value of the value attribute of the radio button that’s selected.

e.target.value has the value of the value attribute.

As a result, when we click on a radio button, the latest value of gender is logged.

Conclusion

To use radio buttons in React, we can set a state to the selected radio button’s value attribute value.

Sometimes, we want to change the text field font color in React Material UI.

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

How to change the text field font color in React Material UI?

To change the text field font color in React Material UI, we call the makeStyles function with an object with the styles we want to apply.

For instance, we write:

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

const useStyles = makeStyles({
  input: {
    color: "blue"
  }
});

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

  return (
    <TextField
      inputProps={{ className: classes.input }}
      id="outlined-basic"
      label="Write something..."
      variant="outlined"
    />
  );
}

to call makeStyles with an object that has the input property that’s set to an object with the color property set to 'blue'.

Next, we call useStyles to return the classes object.

Then we set the inputProps property of the TextField component to an object with the className property set to the classes.input class which we defined with makeStyles.

We set the color property to 'blue', so the input text should be blue.

Conclusion

To change the text field font color in React Material UI, we call the makeStyles function with an object with the styles we want to apply.