styled-component-typescdript-react-create-appでreset-css

styled-component-typescdript-react-create-app.md

styled-component-TypeScript-react-create-app(CRA)でreset-css(リセットCSS)

CRAでstyled-componentを導入し、cssをreset(リセットCSS)する方法

地味に記事がなかったので

@bukotsunikki

やること

• Themeを入れる
• GlobalなCSSが当てれるようにする
• styled-reset-advanced を入れる
• 型定義がないから作る -> src/types/配下に配置
• (通常tsconfig.jsonの設定いるかもしれないけど、CRAでは問題なかった)

src/theme.ts

// JS reimplementation of Style Closet scales for use in styled-components

import * as styledComponents from 'styled-components';
import { ThemedStyledComponentsModule } from 'styled-components';

const colors = {
  blue: '#2179ee',
  green: '#00cc9a',
  coral: '#ff6759',
  gold: '#f0b95b',
  purple: '#7537ef',
  white: '#ffffff',
  black: '#000000',

  grey10: '#f3f4f8',
  grey20: '#e1e5eb',
  grey30: '#c2c6cc',
  grey40: '#9ea2a8',
  grey50: '#686c73',
  grey60: '#30363d'
};

const secondaryColors = {
  blue10: '#ade7ff',
  blue20: '#61bcff',
  blue30: '#2179ee',
  blue40: '#1f4ab4',
  blue50: '#1d2064',
  green10: '#b5ffcb',
  green20: '#5dffa3',
  green30: '#00cc9a',
  green40: '#219a8a',
  green50: '#183f51',
  purple10: '#dec7ff',
  purple20: '#a673ff',
  purple30: '#7537ef',
  purple40: '#4e23b6',
  purple50: '#2d1b64',
  coral10: '#ffc6b3',
  coral20: '#ff8e75',
  coral30: '#ff6759',
  coral40: '#eb312a',
  coral50: '#7b1e30',
  gold10: '#ffedc2',
  gold20: '#ffda8b',
  gold30: '#f0b95b',
  gold40: '#e5a229',
  gold50: '#6a4a24'
};

const breakpoints = ['31.25em', '43.75em', '46.875em'];
const fontSizes = ['1.2rem', '1.4rem', '1.6rem', '1.8rem', '2.4rem', '2.8rem', '3.2rem', '4.0rem', '4.8rem', '6.4rem'];
const space = ['0', '.4rem', '.8rem', '1.2rem', '1.6rem', '2.0rem', '3.2rem', '4.8rem', '6.4rem', '9.6rem'];

interface StyleClosetTheme {
  breakpoints: string[];
  fontSizes: string[];
  space: string[];
  colors: { [key in keyof typeof colors]: string };
  secondaryColors: { [key in keyof typeof secondaryColors]: string };
}

const styled = {
  default: styledComponents.default,
  css: styledComponents.css,
  createGlobalStyle: styledComponents.createGlobalStyle,
  keyframes: styledComponents.keyframes,
  ThemeProvider: styledComponents.ThemeProvider
} as ThemedStyledComponentsModule<StyleClosetTheme>;


const { css, createGlobalStyle, keyframes, ThemeProvider } = styled;
/* eslint-enable import/no-default-export */
const theme = {
  css,
  createGlobalStyle,
  keyframes,
  ThemeProvider,
  breakpoints,
  fontSizes,
  space,
  colors,
  secondaryColors
};

export { theme };

src/App.tsx`

import * as Theme from './theme';
import { ThemeProvider } from 'styled-components';
import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset-advanced';

const GlobalStyle = createGlobalStyle`
  ${reset}
`;
const Application: React.FC = () => {
  return (
    <ErrorBoundary.default>
      <ReactRedux.Provider store={store}>
        <ConnectedRouter.ConnectedRouter history={history}>
          <CookiesProvider>
          <ThemeProvider theme={Theme.theme}>
          <>
            <GlobalStyle />
            <AppContext.default.Provider
              value={{
                applicationState: {
                  user: {
                    isAuthenticated: applicationState.user.isAuthenticated,
                    cookie: applicationState.user.cookie,
                    id: applicationState.user.id,
                    email: applicationState.user.email
                  }
                }
              }}
            >
              <ReactRouter.Switch>
                <ReactRouter.Route
                  component={PlayerDetail.Component}
                  exact
                  path={`/players/:id(\d+)`}
                />
                .
                .
                .
                
)

src/types/styled-reset-advanced

declare module 'styled-reset-advanced' {
  export default styled-reset-advanced;
}

src/components/atoms/Button.tsx

import React, { useCallback } from 'react'
import styled from 'styled-components'
type Props = {
  disabled?: boolean
  text: string
  onClick(): void
}
const Button: React.FC<Props> = ({ disabled = false, text, onClick }) => {
  const handleClick = useCallback(() => {
    onClick()
  }, [onClick])
  return (
    <ButtonStyled disabled={disabled} onClick={handleClick}>
      {text}
    </ButtonStyled>
  )
}

const ButtonStyled = styled.button`
  width: 150px;
  border: none;
  padding: 18px;
  font-size: 18px;
  cursor: pointer;
`

export default Button

これでエラーが出る場合

TypeScript error in C:/Users/yourpath/src/types/styled-reset-advanced.ts(1,1): All files must be modules when the '--isolatedModules' flag is provided. TS1208

恐らくその型定義ファイルがts拡張子になっていて

hoge.d.ts

になっていないことを疑ってください