@emotion/styledで、Material UIのThemeを利用 & 型推論できるようにする

環境

React.js : 16.12.0

Material UI : 4.9.5

@emotion/styled : 10.0.27

TypeScript : 3.7.2

前提

一応、前提としてはMaterial-UIのThemeをカスタマイズしていること。

code:App.tsx

import React from "react";

import {

StylesProvider,

MuiThemeProvider,

createMuiTheme

} from "@material-ui/core";

const theme = createMuiTheme({ ... });

function App() {

return (

<StylesProvider injectFirst>

<MuiThemeProvider theme={theme}>

...

</MuiThemeProvider>

</StylesProvider>

);

}

export default App;

emotion-themingのインストール

code:bash

$ yarn add emotion-theming

ThemeProviderを追加

code:App.tsx

import React from "react";

import {

StylesProvider,

MuiThemeProvider,

createMuiTheme

} from "@material-ui/core";

+ import { ThemeProvider as EmotionThemeProvider } from "emotion-theming";

const theme = createMuiTheme({ ... });

function App() {

return (

<StylesProvider injectFirst>

<MuiThemeProvider theme={theme}>

+ <EmotionThemeProvider theme={theme}>

...

+ </EmotionThemeProvider>

</MuiThemeProvider>

</StylesProvider>

);

}

export default App;

これでMaterial-UIのThemeがEmotionにも適用された。

styled関数にTheme型をつける

※型推論というと微妙で、一応Themeのプロパティは補完されるようになる。（ただし、anyという...）

code:index.d.ts

declare module '@emotion/styled' {

import { CreateStyled } from '@emotion/styled/types/index';

import { Theme } from '@material-ui/core';

export * from '@emotion/styled/types/index';

const customStyled: CreateStyled<Theme>;

export default customStyled;

}

code:@emotion/styled/types/index.d.ts

export interface CreateStyled<Theme extends object = any>

extends BaseCreateStyled<Theme>,

StyledTags<Theme> {}

declare const styled: CreateStyled

export default styled

これでOK。

code:TypeScript

import styled from '@emotion/styled';

const StyledButton = styled(Button)(props => ({

backgroundColor: props.theme.palette.primary.main,

}));

Storybookを利用している場合は、decoratorでテーマの設定を行う

code:.storybook/preview.js

import React from "react";

import { addDecorator } from "@storybook/react";

import ThemeProvider from "../src/customProvider/ThemeProvider";

addDecorator(storyFn => <ThemeProvider>{storyFn()}</ThemeProvider>);