[react] material-ui, styled-components 같이 쓸때 테마 적용 안될때

material-ui에 테마적용은 잘 되는데, sytled-components 에는 안될때는 ThemeProvider를 살펴봐야 한다.

 

각각 제공하는 ThemeProvider가 있는데 다음과 같다.

// material-ui
import {ThemeProvider as MuiThemeProvider} from "@material-ui/core";
// styled-components
import {ThemeProvider as StyledThemeProvider} from "styled-components"

 

이 두개를 다 적용해줘야 styled-components 에서 테마를 꺼내쓰는게 가능하다.

예를들면 다음처럼 설정.

 

_app.js 파일 내

...
import {CssBaseline, ThemeProvider as MuiThemeProvider} from "@material-ui/core";
import {ThemeProvider as StyledThemeProvider} from "styled-components"
import {StylesProvider} from "@material-ui/styles";

...
    const defaultTheme = createMuiTheme({
        palette: {
            primary: indigo,
        },
    });

    return (
        <>
            <StylesProvider injectFirst>
                <StyledThemeProvider theme={defaultTheme}>
                    <MuiThemeProvider theme={defaultTheme}>
                        <CssBaseline />
                        <Layout>
                            <Component {...pageProps} />
                        </Layout>
                    </MuiThemeProvider>
                </StyledThemeProvider>
            </StylesProvider>
        </>
    )
...

 

StylesProvider 는 Material-UI -> Styled-Components 의 순으로 바꾸는 역할을 하는데 필수로 적용해줘야 Styled-Components 가 제대로 작동한다.

 

그럼 이제 Styled-components 에서 theme를 사용하는 방법을 활용해보자

const CustomBox = styled(Box)`
  ${({ theme }) => `
    background-color: ${theme.palette.primary.main};
  `}
`

 

props 안에 있는 theme의 설정정보를 로드해 적용한다.

관련 문서는 다음 페이지 확인.

https://material-ui.com/guides/interoperability/#theme

Style Library Interoperability - Material-UI

 

 

 

끝.