如何给 Components 添加样式Styling

CSS Stylesheet

1 2 3 4 5 6 7 8 9 10 
import React from 'react';import './Box.css'; const Box = () => (<div className="Box">    <p className="Box_content">Get started with CSS styling</p></div>); export default Box;

1 2 3 4 5 6 7 8 9 
.Box {    margin: 40px;    border: 5px dotted pink;} .Box_content {    font-size: 15px;    text-align: center;}

Inline styling

Inline style 是用 js 的 object 来定义的，该 object 用 camelCased 的 key 作为 style name.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 
import React from 'react'; const divStyle = {margin: '40px',border: '5px solid pink'}; const Box = () => (<div style={divStyle}>    <p style={{color: 'pink'}}>Get started with inline style</p></div>); export default Box;

Styled components ((Css-in-JS))

1 2 3 4 5 6 7 8 
import styled from 'styled-components'; const Text = styled.div`    color: white,    background: black` <Text>Hello ZZAX</Text>