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

bla

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.

mw509

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!

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How can I update the style of a styled-component based on scroll position without re-rendering an array of randomly placed sibling components?

How to extend component style in styled-components

Styled Components - How to style a component passed as a prop?

How to style a component based on state in Styled Components?

How to change the style of a single component within an other component with styled-components?

With styled-components, how can I target a child class of a component?

How to give style a child component of normal component at Styled Components lib

How to change style of styled-component dynamically?

How can I change the style of a parent component?

Can styled-components be used to style a custom component

For styled components, how can I make all component styles cascade to .hover component styles?

how to use same style on different component with styled-components

How to style a nested functional component using styled components

How to pass props into style styled components file from component?

Apply styled component style to a third party components

How can I understand MaterialUI styled component?

How to add style to a component with styled component react?

How to change a component's color with styled-components?

How can I pass props to base component in styled-component?

Style parent component on input focus of child component in styled-components

Change css style by classname using styled component

how to change styled(component) element

styled-components: style in theme is overriding component style

change nested component's style based on parent props in styled-components?

How can I style a Select from Material UI with styled components?

how to change a styled component's before content on hover [emotion.js , styled components ]

How can I pass value from one component from another component in Angular8 (Independent components)

Multiple Components with same state name, how to change one state of one component without affecting the others?

How can I change styling of all Material UI Typography components in single react component without applying a class to every element?