How i can change a style of one component in Styled-Components without create a new component?

Question

I have in my file LoginWrapper.js the import of the Material Design Grid:

import Grid from '@material-ui/core/Grid';

I'm trying to change this component:

import styled from 'styled-components'
import Grid from '@material-ui/core/Grid';

const GridMaterial = styled(Grid)`
    height: 100vh;
    backgroundColor: red;
`

export default GridMaterial;

How i can apply this style GridMaterial in my grid? I imported in my archive LoginWrapper.js the styles:

import LoginStyles from './login-form/LoginStyles'

And tried to put this in my component:

 <Grid className={LoginStyles.GridMaterial} container component="main">

But this styles don't apply in my grid component.

Answer 1

Try this way;

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

const useStyles= makeStyles({
  gridStyle: {
    height: 100vh;
    backgroundColor: red;
  }
});

usage:

const classes = useStyles();

<Grid className={classes.gridStyle}>
     //....Code goes here...
</Grid>

Reference and other options: https://material-ui.com/styles/basics/

Let me know if this works. Glad to help further!