styled-compoentでreactのUIコンポーネントを試す

reactプロダクトを作成する

npx create-react-app karaage-react-test-styled-compoent --template typescript

styled-compoentをインストール

npm install styled-components
#typescript の場合は以下も
npm install --save-dev @types/styled-components

sampleコード

import React from 'react';
import styled from 'styled-components';

export class Header extends React.Component{
  private wrapper =  styled.div`
    width: 100%;
    height: var(--header-size);
    display: flex;
    align-items: center;
    justify-content: center;
    background: red;
  `

  render(){
    return (
      <this.wrapper>
        <p> I'm Header</p>
      </this.wrapper>
    )
  }
}

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';

import { Header } from './ui-components/header/header'
import { Footer } from './ui-components/footer/footer'

ReactDOM.render(
  <React.StrictMode>
    <header className="header">
      <Header/>
    </header>

    <div className="app">
      <p> any content</p>
    </div>

    <footer className="footer">
      <Footer/>
    </footer>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

感想

• CSSのカプセル化することでグローバルでのcssクラスの宣言をする必要がない。
  • sassなどのmixinの定義が必要になるかもだけど :root で数値だけ持てばいいしコンポーネントでデザインを持てばいいのでは感。

• エディターのcssのサジェストが効かないので何かしらのプラグインが必要になるのが辛い
  • cssファイル側で定義して注入（？）的なことができると楽な気がする。

リポジトリ

https://github.com/eeenbnb/karaage-react-test-styled-compoent