React style適用

◾️ 必要なpackage一覧

  1. styled-reset
  2. 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);

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です