Currently, I am working on a project utilizing Material-UI's library and encountering styling issues.
This project marks my initial venture into ReactJS and JavaScript in general. Therefore, any assistance would be greatly appreciated!
I am struggling to style my text box in the manner demonstrated in their example.
This is the code snippet:
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>
);
}
}
The sample I referenced can be found here: https://codesandbox.io/s/51hrm
I have exactly replicated the useStyles at the top, resulting in this outcome:
This issue with calling useStyles in my components is not isolated, as I've encountered it multiple times.
While 'classes = useStyles;' functions correctly with some useStyles, it doesn't work with others, leaving me perplexed.
Due to the existing structure of other pages, I am hesitant to adopt Functions like the provided example.
Your assistance is much appreciated in advance!