How to change the style of a component without creating another component with Styled Components

Question

I have in the file Loginwrapper.js the import of a Grid material design:

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

I have in the Loginstyles.js file a css change for 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 can I apply Gridmaterial style to my grid? I imported into my Loginwrapper.js file the Login page styles:

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

And I tried to use my class component:

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

However, the class was not applied to the element. How can I apply this class to my grid?

Answer 1

In fact, when you create a Styled-Component, you create a new COMPONENT and not a new classecss or a new style object.

Therefore, you need to use this component directly.

Instead of:

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

Will be:

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

<GridMaterial container component="main">...