0.前言

本篇主要为官网 styled-components 的基础使用记录。

styled-components官网：https://styled-components.com/docs/basics#

本篇博客的项目仓库地址：styled_components_demo (opens new window)

1.Basics

1.1 基础使用

通过.DOMElement + 反引号的方式包裹 css。

export const Basic = () => {
  return (
    <div>
      <p>1.基础使用</p>
      <Wrapper>
        <Title>
          Hello World!
        </Title>
      </Wrapper>
    </div>
  )
}

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

const Wrapper = styled.section`
  padding: 2em;
  background: papayawhip;
`;

1.2 可以像普通的React组件一样传递props

内部通过：${props=>...}接受传递的props属性。

export const UseProps = () => {
  return (
    <div>
      <p>2.Button组件可以自定义attr：</p>
      <Wrapper>
        <Button primary>Primary</Button>
        <Button >Normal</Button>
        <TomatoButton>TomatoButton</TomatoButton>
      </Wrapper>
    </div>
  )
}

// 接受 “interpolation”
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;
`;

// 继承特性
const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

const Wrapper = styled.section`
  padding: 2em;
  background: papayawhip;
`;

1.3 as的用法

更改继承的标签，as的值既可以是原生的标签：<a>，也可以是一个自定义组件Component.

export const ModifyExtends = () => {
  return (
    <div>
      <p>3.as的使用方法：</p>
      <Wrapper>
        <Button2 href="#!">Button 继承自 a 标签</Button2>
        <Button as="a" href="#!">将继承的标签从button改为a</Button>
        <TomatoButton as="a" href="#!">将继承的标签从Button改为a</TomatoButton>
        <Button as={ReversedButton}>将继承的标签从button改为自定义的组件</Button>
      </Wrapper>
    </div>
  )
}

// Button 继承自 <a> 标签
const Button2 = styled.a`
  display: inline-block;
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

// 接受 “interpolation”
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;
`;

// 继承特性
const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

// 自己写的组件
const ReversedButton = props => <Button {...props} children={props.children.split('').reverse()} />

1.4 实用：修改第三方组件的样式

假设下面案例中<Link>的是由ant-design-mobile，则可以直接使用styled(Link)对样式进行修改。

export const ThirdPartComponent = () => {
    return (
        <div>
            <p>4.模拟继承第三方组件：</p>
            <Wrapper>
                <Link>Unstyled, boring Link</Link>
                <br />
                <StyledLink>Styled, exciting Link</StyledLink>
            </Wrapper>
        </div>
    )
}

// Link 是导入的第三方组件
const Link = ({ className, children }) => (
    <a className={className} href="#!">
        {children}
    </a>
);

// 使用 () 继承 第三方组件
const StyledLink = styled(Link)`
    color: palevioletred;
    font-weight: bold;
`

1.5 styled-components 自动区分出props属性类型

在下面这个例子中，defaultValue 和type 是原生input 的属性.

而 inputColor 则是自定义的属性。

对于原生属性则会直接作用在input上，换句话说，styled.input构造出的组件拥有原生input标签上所有的默认属性。

export const AutoCheckAttr = () => {
    return (
        <div>
            <p>5.自动check属性类型：原生 or 自定义</p>
            <Wrapper>
                <Input defaultValue="@probablyup" type="text" />
                <Input defaultValue="@geelen" type="text" inputColor="rebeccapurple" />
            </Wrapper>
        </div>
    )
}

// 智能传递 props
// input 原生属性： defaultValue 和 type
// 自定义属性： inputColor 
const Input = styled.input`
  padding: 0.5em;
  margin: 0.5em;
  color: ${props => props.inputColor || "palevioletred"};
  background: papayawhip;
  border: none;
  border-radius: 3px;
`;

1.6 CSS语法规范

export const CssSelector = () => {
  return (
    <div>
      <p>6.CSS 选择器在styled-components的应用</p>
      <Wrapper>
        <Thing>Hello world!</Thing>
        <Thing>How ya doing?</Thing>
        <Thing className="something">The sun is shining...</Thing>
        <div>Pretty nice day today.</div>
        <Thing>Don't you think?</Thing>
        <div className="something-else">
          <Thing>Splendid(此Thing在div中)</Thing>
        </div>
      </Wrapper>

    </div>
  )
}


const Thing = styled.div`
  &{
    color: blue;
  }    

  &:hover {
    color: red; 
  }
  
  // Thing 元素后所有的 Thing 元素
  & ~ & {
    background: #888;
  }

  // Thing 元素后的第1个 Thing 元素
  // (element1 + element2 ：选择紧跟 element1 后的第1个 element2)
  // (element1 + element1 ：除最后一个element1)
  & + & {
    background: green; 
  }

  // 不知道啊为啥选中最后1个？
  &:nth-child(1){
    // background: blue;
  }

  // 类名和Thing 同一级时：
  &.something {
    background: orange; 
  }

  // 类名和Thing 不同级时
  .something-else & {
    border: 2px solid #000; 
  }
`

1.7 封装具有默认属性的组件

如下，可以将type和size封装为组件的默认属性，无需在外部对其进行属性的显示传递。

语法：styled.input.attr(props=>....)

export const DefaultAttr = () => {
    return (
        <div>
            <p>7.定义的props可以和外部的props合并再传下去：</p>
            <Wrapper>
                <Input2 placeholder="A small text input" />
                <br />
                <Input2 placeholder="A bigger text input" size="2em" />
            </Wrapper>
        </div>
    )
}

//  可以设置默认属性，attr接受默认属性，此处定义的props可以和外部的props合并再传下去
const Input2 = styled.input.attrs(props => ({
    type: "text",
    size: props.size || "1em",
}))`
    color: palevioletred;
    font-size: 1em;
    border: 2px solid palevioletred;
    border-radius: 3px;
  
    /* here we use the dynamically computed prop */
    margin: ${props => props.size};
    padding: ${props => props.size};
  `;

1.8 全局状态的设置

即，该组件中的样式的会影响到其余的样式。类似于App.css。

可以在其中对border、padding等属性进行通用设置。

export const GlobalComponent = () => {
  return (
    <div>
      <p>8.全局样式GlobalStyle：</p>
      <Wrapper>
        <GlobalStyle />
        <Thing>
          I'm blue, da ba dee da ba daa
        </Thing>
      </Wrapper>
    </div>
  )
}

// 提供全局变量，以及 && 可以提升优先级
const Thing = styled.div`
   & {
     color: blue;
   }
 `

// 相当于代替了 App.css 的功能。
const GlobalStyle = createGlobalStyle`
  body{
   background: #eee;
   padding-left: 20px;
   padding-bottom: 50px;
  }
   
  div${Thing} {
    color: red;
  }
 `