◾️ 必要なpackage一覧
- styled-reset
- styled-components
$ yarn add styled-reset
$ yarn add styled-components◾️ 作成例
- global style適用 : GlobalStyle.js作成後、Appでimportして適用
import {createGlobalStyle} from "styled-components"
import reset from "styled-reset"
const globalStyles = createGlobalStyle`
    ${reset}
    body{
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
        Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
        background-color:white;
    }
`;
export default globalStyles;
import React from "react";
import Router from "./Router";
import GlobalStyle from "./GlobalStyles"
function App() {
  return (
    <div>
      <Router />
      <GlobalStyles />
    </div>
  );
}
export default App;- styled-components適用例
import React from "react"
import {Link, withRouter} from "react-router-dom"
import styled from "styled-components"
const Header = styled.header`
    color:white;
`;
const List = styled.ul`
    margin-left:20px
`;
const Item = styled.li`
    width:80px;
    height:50px;
`;
function StyleHead(props) {
    console.log(props)
    return (
        <Header>
            <List>
                <Item>
                    <Link to="/">A</Link>
                </Item>
                <Item>
                    <Link to="/tv">B</Link>
                </Item>
            </List>
        </Header>
    );
}
export default withRouter(StyleHead);