Как я могу изменить стиль одного компонента в Styled-Components без создания нового компонента?

Question

У меня в файле LoginWrapper. js импорт сетки проектирования материалов:

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

Я пытаюсь изменить этот компонент:

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

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

export default GridMaterial;

Как я можно применить этот стиль GridMaterial в моей сетке? Я импортировал в свой архив LoginWrapper. js стили:

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

и попытался поместить это в мой компонент:

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

Но эти стили не применяются в моей сетке компонент.

Answer 1

Попробуйте следующим образом;

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

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

Использование:

const classes = useStyles();

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

Ссылка и другие опции: https://material-ui.com/styles/basics/

Дайте мне знать если это работает. Рад помочь в дальнейшем!