◾️ 必要な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);