styled-components の基本（最低限）

インストール

npm install --save styled-components

基本的な書き方

import styled from 'styled-components'

const 変数名 = styled.タグ名`
  cssを書く
`

## サンプル
const Button = styled.button`
  width: 300px;
  height: 100px;
  border-radius: 10px;
`

簡単なサンプル

よく使うコンテナとは定義しといて使う回す。 ボタンなども共通化したら良さそう

import React, {Component, useState} from 'react';
import styled from 'styled-components'

const Container = styled.div`
  width: 300px;
  margin: 0 auto;
  text-align: center; 
`

const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;
`

class App extends React.Component {
  render() {
    return(
      <Container>
        <h1>hello world</h1>
        <Button>クリック</Button>
      </Container>
    )
  }
}

ドキュメント

styled-components.com