Next.js | Mui Component props styled 적용하기

Grid container 과 같은 mui에서 자체적으로 사용하는 props를 styled로 사용하는 방법은 다음과 같다.

이 방법만 알아도 왠만한 css는 정리가 가능할 것이다.

const GridContainer = styled((props) => <Grid container {...props} />) <any>`
    width: ${(props) => props.width || `100%`};
    height: ${(props) => props.height};
`

 

- 예시 전체 코드

import { Grid } from '@mui/material'
import { GetServerSideProps, NextPage } from 'next'
import { styled } from '@mui/material/styles'

const GridContainer = styled((props) => <Grid container {...props} />) <any>`
    width: ${(props) => props.width || `100%`};
    height: ${(props) => props.height};
`

const GridItem = styled((props) => <Grid item {...props} />) <any>`
    width: ${(props) => props.width || `100%`};
    height: ${(props) => props.height};
`

const Login: NextPage = () => {
    return (
        <>
            <GridContainer height={"300px"} >
            </GridContainer>
            <GridContainer height={"300px"} >
                <GridItem xs={12}>
                    <GridContainer
                        direction={"row"}
                    >
                        <GridItem xs={4}>
                            a
                        </GridItem>
                        <GridItem xs={4}>
                            b
                        </GridItem>
                        <GridItem xs={4}>
                            c
                        </GridItem>
                    </GridContainer>
                </GridItem>
            </GridContainer>
        </>
    )
}

export default Login;


export const getServerSideProps: GetServerSideProps = async (context) => {

    return {
        props: {
        },
    };
}

 

참고로 모듈로 styled 파일을 따로 빼둘 때에는 tsx 확장자로 해야한다.