styled-system

Styled System 是一包工具函式，用來輔助建立styled component，它的優點主要是可以讓元件建立統一的API、更便利的撰寫repoinsive(響應式設計) 樣式等。

styled-components

要在css中撰寫inline-style須先安裝CSS-in-JS的library

npm install styled-system styled-components -D

styled-components可以用函式做為參數，並用props傳遞

// styled-components/common
const style from 'styled-components'

const Box = styled.div`
	margin: 10px;
	padding: 15px;
	background: tomato
	color: ${(props) => props.color}
`

export default Box

在需要使用樣式的元件導入

import Box from '../styled-components/common'

<Box color="white">styled-components-demo</Box>

將傳入的參數改用function處理

// styled-components/common
const style from 'styled-components'

const getColor = ({color}) => `
	color: ${color || "black"}
`

const Box = styled.div`
	margin: 10px;
	padding: 15px;
	background: tomato;
	${getColor};
`

export default Box

也可以透過function傳入多組樣式

// styled-components

const getBoxStyle = ({ padding, margin }) => ({
  margin,
  padding
});

const Box = styled.div`
	${getBoxStyle}
`

export default Box

styled-components具有很大的彈性可以客製編輯自己的組件樣式。

https://codesandbox.io/s/styled-components-f914e?file=/src/App.js:179-250

Theme Provider

在最外層透過context傳遞的方式，將元件以Theme Provider包覆傳遞資料 (material ui也是透過這種方式傳遞)

被包覆的子元件可以直接調用theme裡的參數

const Box = styled.div`
	margin: 15px 0;
  padding: 15px 0;
  background: ${({ theme }) => theme.bg.tomate}
`;

export default Box