Styled Components 备忘清单

Styled Components 是增强 CSS 在 React 组件系统样式的 CSS in JS 的最佳实践。

• VSCode styled-components 有代码高亮和代码提示
• VIM styled-components 有代码高亮
• WebStorm styled-components 有代码高亮和代码提示

安装依赖和 TypeScript 类型依赖

npm install --save styled-components

const Button = styled.button`
  color: palevioletred;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;
// 基于 Button 的新组件，但具有一些覆盖样式
const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;
const Demo = () => (
  <div>
    <Button>普通按钮</Button>
    <TomatoButton>番茄色按钮</TomatoButton>
  </div>
);

const Link = ({ className, children }) => (
  <a className={className}>
    {children}
  </a>
);
const StyledLink = styled(Link)`
  color: palevioletred;
  font-weight: bold;
`;
<StyledLink className="hello" />

const Box = styled.div`/* ... */`;
const Wrapper = ({ message }) => {
  // ⚠️ 不能在这里定义 styled 组件
  return (
    <Box>
      {message}
    </Box>
  );
};

注意：组件 Box 不能放到 Wrapper 函数组件里面

const Input = styled.input`
  color: ${
    props => 
      props.inputColor || "palevioletred"
  };
  background: papayawhip;
`;
const Demo = () => (
  <div>
    <Input
      defaultValue="@probablyup"
      type="text"
    />
    <Input
      defaultValue="@geelen"
      type="text"
      inputColor="rebeccapurple"
    />
  </div>
);

const PropsBox = styled.div(props => ({
  background: props.background,
  height: '50px',
  width: '50px',
  fontSize: '12px'
}));

在组件中使用

const Example = () => {
  return (
    <div>
      <PropsBox
        background="blue"
      />
    </div>
  );
}

注意：样式对象里面的样式并不是 CSS 中的写法。

import {
  styled,
  createGlobalStyle
} from 'styled-components'

const Thing = styled.div`
   && {
     color: blue;
   }
`;
const GlobalStyle = createGlobalStyle`
  div${Thing} {
    color: red;
  }
`;

const Example = () => (
  <React.Fragment>
    <GlobalStyle />
    <Thing>
      我是蓝色的
    </Thing>
  </React.Fragment>
);

const Thing = styled.div`
  color: blue;
  /* <Thing> 中标记为“.something”的元素 */
  .something {
    border: 1px solid;
  }
`;

function Example() {
  return (
    <Thing>
      <label
        htmlFor="foo-button"
        className="something"
      >
        神秘按钮
      </label>
      <button id="foo-button">
        我该怎么办？
      </button>
    </Thing>
  )
}

const rotate = keyframes`
  from {top:0px;}
  to {top:200px;}
`;

// ❌ 这将引发错误！
const styles = `
  animation: ${rotate} 2s linear infinite;
`;

// ✅ 这将按预期工作
const styles = css`
  animation: ${rotate} 2s linear infinite;
`;

class NewHeader extends React.Component {
  render() {
    return (
      <div
        className={this.props.className}
      />
    );
  }
}
const StyledA = styled(NewHeader)``
const Box = styled.div`
  ${StyledA} {
    /* 变更 NewHeader 样式 */
  }
`;

const Input = styled.input.attrs(props=>({
  // 我们可以定义静态道具
  type: "text",
  // 或者我们可以定义动态的
  size: props.size || "1em",
}))`
  color: palevioletred;
  font-size: 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;

  /* 这里我们使用动态计算的 props */
  margin: ${props => props.size};
  padding: ${props => props.size};
`;

使用 Input 组件

function Example() {
  return (
    <div>
      <Input placeholder="小文本输入" />
      <br />
      <Input
        placeholder="更大的文本输入"
        size="2em"
      />
    </div>
  )
}

const Input = styled.input.attrs(props=>({
  type: "text",
  size: props.size || "1em",
}))`
  border: 2px solid palevioletred;
  margin: ${props => props.size};
  padding: ${props => props.size};
`;
// Input 的attrs会先被应用，然后这个 attrs obj
const PasswordInput = styled(Input).attrs({
  type: "password",
})`
  /* 同样，border 将覆盖 Input 的边框 */
  border: 2px solid aqua;
`;

使用 Input 和 PasswordInput 组件

render(
  <div>
    <Input
      placeholder="更大的文本输入"
      size="2em"
    />
    <br />
    {/*⚠️ 仍然可以使用Input中的 size attr*/}
    <PasswordInput
      placeholder="更大的密码输入"
      size="2em"
    />
  </div>
);

创建关键帧

const rotate = keyframes`
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
`;

我们创建一个 Rotate 组件

// 它将在两秒内旋转我们传递的所有内容
const Rotate = styled.div`
  display: inline-block;
  animation: ${rotate} 2s linear infinite;
  padding: 2rem 1rem;
  font-size: 1.2rem;
`;

使用 Rotate 组件

function Example() {
  return (
    <Rotate>&lt; 💅🏾 &gt;</Rotate>
  )
}

import {
  ThemeConsumer
} from 'styled-components'

function Example() {
  return (
    <ThemeConsumer>
      {theme => (
        <div>主题色是 {theme.color}</div>
      )}
    </ThemeConsumer>
  );
}

Web 应用上安装 styled

npm install -D @types/styled-components

React Native 应用上安装 styled

npm install -D \
    @types/styled-components \
    @types/styled-components-react-native

如果对 TypeScript 不熟悉，参考 TypeScript 备忘清单

import styled from 'styled-components';

interface TitleProps {
  readonly isActive: boolean;
}

const Title = styled.h1<TitleProps>`
  color: ${(props) => (
    props.isActive 
      ? props.theme.colors.main 
      : props.theme.colors.secondary
  )};
`;

import styled from 'styled-components';
import Header from './Header';

const Header = styled.header`
  font-size: 12px;
`;

const NewHeader = styled(Header)<{
  customColor: string;
}>`
  color: ${(props) => props.customColor};
`;

import styled from 'styled-components';
import Header from './Header';

interface ReHeader {
  $customColor: string;
}

const ReHeader = styled(Header)<ReHeader>`
  color: ${
    props => props.$customColor
  };
`;

禁止 customColor 属性转移到 Header 组件，在其前面加上美元($)符号