styled-compnents

我們可以使用這個庫來自定義元件的樣式，它會將給定的樣式包裝成一個元件，可以直接使用這個元件，就像ant-design中的元件一樣，看起來很漂亮，我們直接使用即可，我們也可以使用styled-components來自定義我們想要的元件樣式。

使用方法

先安裝

cnpm install styled-components --save

然後引入

import styled from 'styled-components'

具體使用方法可以參考官網

我在這裡只對每一項進行總結

總結

Getting Started

也就是我們可以像下面這樣使用它

// Create a Title component that'll render an <h1> tag with some styles
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

// Create a Wrapper component that'll render a <section> tag with some styles
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

// Use Title and Wrapper like any other React component – except they're styled!
render(
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);
 

通過styled.html標籤,然後跟一個模板字串,可以在裡面自定義樣式，它返回一個react元件，我們可以在專案中使用它。

Adapting based on props

const Button = styled.button`
  /* Adapt the colors based on primary prop */
  background: ${props => props.primary ? "palevioletred" : "white"};
  color: ${props => props.primary ? "white" : "palevioletred"};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

render(
  <div>
    <Button>Normal</Button>
    <Button primary>Primary</Button>
  </div>
);
 

意思就是我們在使用通過自定義得到的元件的時候，如果傳入了props,可以在裡面獲得，每個屬性的值，都可以是一個function，它的引數是傳進來的props。

Extending Styles

可以使用styled()來繼承元件的樣式

const Button = styled.button`
  display: inline-block;
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;
 

還可以使用as屬性來改變元件所使用的標籤或則基於的元件，例如一個以button為標籤的元件，我可以把它變成以a為標籤的元件

const Button = styled.button`
  display: inline-block;
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

render(
  <div>
    <Button>Normal Button</Button>
    <Button as="a" href="/">Link with Button styles</Button>
    <TomatoButton as="a" href="/">Link with Tomato Button styles</TomatoButton>
  </div>
);
-----------------------------------------------------
const Button = styled.button`
  display: inline-block;
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

const ReversedButton = props => <button {...props} children={props.children.split('').reverse()} />

render(
  <div>
    <Button>Normal Button</Button>
    <Button as={ReversedButton}>Custom Button with Normal Button styles</Button>
  </div>
);

Passed props

如果是使用styled.html標籤，那麼在使用得到的元件的時候，可以傳遞已知的html屬性給它,它會被傳遞到dom中。如果是使用的styled(component),那麼在使用得到的元件的時候會將所有的屬性，傳遞過去。

const Input = styled.input`
  padding: 0.5em;
  margin: 0.5em;
  color: ${props => props.inputColor || "palevioletred"};
  background: papayawhip;
  border: none;
  border-radius: 3px;
`;

// Render a styled text input with the standard input color, and one with a custom input color
render(
  <div>
    <Input defaultValue="@probablyup" type="text" />
    <Input defaultValue="@geelen" type="text" inputColor="rebeccapurple" />
  </div>
);

上面的defaultValue會被傳遞到真實的dom中並被渲染，但是inputColor不是已知的html屬性，所以不能被渲染。

Define Styled Components outside of the render method

為了避免每次渲染的時候重複生成元件，將生成元件的程式碼放到render外面。

Pseudoelements, pseudoselectors, and nesting(偽元素、偽選擇器和巢狀)

• 偽元素、偽選擇器可以直接寫在當前的元素定義的地方，表示該元件的樣式
• &符號，指向當前的元件
• 如果不適用&符號,那麼該選擇器對子元素起作用

const Thing = styled.button`
  color: blue;

  ::before {
    content: '