Trouble calling useStyles in components (Material-UI) - css

Question

Currently doing a project with Material-UI's library. Im having issues with styling.
I'm pretty new to ReactJS or just JS in general, and doing this project is my first time I am interacting with it.
Any help will be greatly appreciated!
I am unable to style my text box like the way example they gave.
this is my code:
class AppBase extends Component {
constructor(props) {
super(props);
this.state = {
...INITIAL_STATE
};
}
classes = useStyles;
render() {
return (
<Container component="main" maxWidth="md">
<div className={this.classes.root}>
<TextField required id="standard-required" label="Required" defaultValue="Hello World" />
<TextField disabled id="standard-disabled" label="Disabled" defaultValue="Hello World" />
<TextField
id="standard-password-input"
label="Password"
type="password"
autoComplete="current-password"
/>
<TextField
id="standard-read-only-input"
label="Read Only"
defaultValue="Hello World"
InputProps={{
readOnly: true,
}}
/>
<TextField
id="standard-number"
label="Number"
type="number"
InputLabelProps={{
shrink: true,
}}
/>
<TextField id="standard-search" label="Search field" type="search" />
<TextField
id="standard-helperText"
label="Helper text"
defaultValue="Default Value"
helperText="Some important text"
/>
</div>
</Container>
);
}
}
This example I have taken is from: https://codesandbox.io/s/51hrm
I have copied the useStyles exactly at the top, and this is what I get:
How the code looks like
This is not the only instance where I am facing this issue with calling useStyles in my components.
Calling 'classes = useStyles;' works on some useStyles but not the others, I am really at lost for this.
Because of the way the other pages has been done, I will not consider using Functions like the example given.
Thank you in advance!

Answer 1

If you're copying the useStyles function from the example provide, then it needs to be called as a function. Right now, you're just assigning the function to the classes variable, but never executing the function. So just change the one line of code as follows:
const classes = useStyles();
And you will execute the useStyles function and assign the result to the classes variable. At that point, you'll be able to use the classes constant in your jsx to style the components, like the example:
<form className={classes.root} ...></form>

Answer 2

useStyles hook can only be called inside a functional component. You have to change your class component to functional component if you want to use useStyles hook.
I have created a live sandbox for you to play around also: https://codesandbox.io/s/loving-bouman-47bek?fontsize=14&hidenavigation=1&theme=dark
The code below should work fine:
import React from "react";
import ReactDOM from "react-dom";
import { Container, TextField } from "#material-ui/core";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles({
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"
}
});
function App() {
const classes = useStyles();
return (
<Container component="main" maxWidth="md">
<div className={classes.root}>
<TextField
required
id="standard-required"
label="Required"
defaultValue="Hello World"
/>
<TextField
disabled
id="standard-disabled"
label="Disabled"
defaultValue="Hello World"
/>
<TextField
id="standard-password-input"
label="Password"
type="password"
autoComplete="current-password"
/>
<TextField
id="standard-read-only-input"
label="Read Only"
defaultValue="Hello World"
InputProps={{
readOnly: true
}}
/>
<TextField
id="standard-number"
label="Number"
type="number"
InputLabelProps={{
shrink: true
}}
/>
<TextField id="standard-search" label="Search field" type="search" />
<TextField
id="standard-helperText"
label="Helper text"
defaultValue="Default Value"
helperText="Some important text"
/>
</div>
</Container>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Also I would hight suggest you to start using functional components instead of class components since the functional components are the future of React.