Styled Components 备忘清单 & styled-components cheatsheet & Quick Reference

安裝

是增強 CSS 在 React 組件系統樣式的 CSS in JS 的最佳實踐。

有代碼高亮和代碼提示
有代碼高亮
有代碼高亮和代碼提示

安裝依賴和 TypeScript 類型依賴

npm install --save styled-components

快速開始

import styled from 'styled-components';

創建一個 Title 組件

// 該組件將呈現具有樣式的 <h1> 標簽
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
`;

創建一個 Wrapper 組件

// 該組件將呈現具有某些樣式的 <section> 標記
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

像使用其他 React 組件一樣使用 Title/Wrapper - 除了它們的樣式！

function Demo() {
  return (
    <Wrapper>
      <Title>
        Hello World!
      </Title>
    </Wrapper>
  );
}

根據 Props 適配

import styled from 'styled-components';

const Button = styled.button`
  /* 根據主要 props 調整顏色 */
  background: ${
    props => 
      props.primary ? "blue" : "white"
  };
  color: ${
    props => 
      props.primary ? "white" : "blue"
  };
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid blue;
  border-radius: 3px;
`;

使用 primary props 控制按鈕樣式

function Demo() {
  return (
    <div>
      <Button>Normal</Button>
      <Button primary>Primary</Button>
    </div>
  );
}

擴展樣式

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>
);

擴展樣式改變標簽 (as)

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

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

const Demo = () => (
  <div>
    <Button>普通按鈕</Button>
    <Button as="a" href="#">
      按鈕樣式的鏈接
    </Button>
    <TomatoButton as="a" href="#">
      番茄按鈕樣式的鏈接
    </TomatoButton>
  </div>
);

自定義組件(as)

const Button = styled.button`
  color: palevioletred;
  font-size: 1em;
  border: 2px solid palevioletred;
  display: block;
`;

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

render(
  <div>
    <Button>普通按鈕</Button>
    <Button as={ReversedButton}>
      具有普通按鈕樣式的自定義按鈕
    </Button>
  </div>
);

樣式化任何組件

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

在 render 之外定義 Styled 組件

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 中的寫法。

CSSModules => styled

import React, { useState } from 'react';
import styles from './styles.css';

function ExampleCounter() {
  const [count, setCount] = useState(0)
  return (
    <div className={styles.counter}>
      <p className={styles.paragraph}>
        {count}
      </p>
      <button
        className={styles.button}
        onClick={() => setCount(count +1)}
      >
        +
      </button>
      <button
        className={styles.button}
        onClick={() => setCount(count -1)}
      >
        -
      </button>
    </div>
  );
}

???? 與下面 styled 寫法等效 ????

import styled from 'styled-components';

const StyledCounter = styled.div`
  /* ... */
`;
const Paragraph = styled.p`
  /* ... */
`;
const Button = styled.button`
  /* ... */
`;
function ExampleCounter() {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count +1);
  }
  const decrement = () => {
    setCount(count -1);
  }
  return (
    <StyledCounter>
      <Paragraph>{count}</Paragraph>
      <Button onClick={increment}>
        +
      </Button>
      <Button onClick={decrement}>
        -
      </Button>
    </StyledCounter>
  );
}

偽元素、偽選擇器和嵌套

const Thing = styled.div.attrs((/* props */) => ({ tabIndex: 0 }))`
  color: blue;
  &:hover {              /* <Thing> 懸停時 */
    color: red;
  }
  & ~ & {                /* <Thing> 作為 <Thing> 的兄弟，但可能不直接在它旁邊 */
    background: tomato;
  }
  & + & {                /* <Thing> 旁邊的 <Thing> */
    background: lime;
  }
  &.something {          /* <Thing> 標記有一個額外的 CSS 類 “.something” */
    background: orange;
  }
  .something-else & {    /* <Thing> 在另一個標記為 “.something-else” 的元素中 */
    border: 1px solid;
  }
`;

render(
  <React.Fragment>
    <Thing>Hello world!</Thing>
    <Thing>你怎么樣？</Thing>
    <Thing className="something">
      艷陽高照...
    </Thing>
    <div>今天真是美好的一天。</div>
    <Thing>你不覺得嗎？</Thing>
    <div className="something-else">
      <Thing>燦爛</Thing>
    </div>
  </React.Fragment>
);

改變 styled 組件樣式

import { css } from 'styled-components'
import styled from 'styled-components'

const Input = styled.input.attrs({
  type: "checkbox"
})``;
const LabelText = styled.span`
  ${(props) => {
    switch (props.$mode) {
      case "dark":
        return css`
          color: white;
          ${Input}:checked + && {
            color: blue;
          }
        `;
      default:
        return css`
          color: black;
          ${Input}:checked + && {
            color: red;
          }
        `;
    }
  }}
`;

function Example() {
  return (
    <React.Fragment>
      <Label>
        <Input defaultChecked />
        <LabelText>Foo</LabelText>
      </Label>
      <Label>
        <Input />
        <LabelText $mode="dark">
          Foo
        </LabelText>
      </Label>
    </React.Fragment>
  );
}

全局樣式 createGlobalStyle

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>
);

className 使用

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 組件樣式定義

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

附加額外的 Props

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>
  )
}

覆蓋 .attrs

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>
  )
}

isStyledComponent

import React from 'react'
import styled, { isStyledComponent } from 'styled-components'
import MaybeStyledComponent from './my'

let TargetedComponent = isStyledComponent(MaybeStyledComponent)
  ? MaybeStyledComponent
  : styled(MaybeStyledComponent)``;

const ParentComponent = styled.div`
  color: cornflowerblue;

  ${TargetedComponent} {
    color: tomato;
  }
`;

ThemeConsumer

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 備忘清單

自定義 Props

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
  )};
`;

簡單的 Props 類型定義

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 組件，在其前面加上美元($)符號

函數組件類型繼承

import { FC, PropsWithRef, DetailedHTMLProps, ImgHTMLAttributes } from 'react';
import styled from 'styled-components';

const Img = styled.img`
  height: 32px;
  width: 32px;
`;
export interface ImageProps extends DetailedHTMLProps<
  ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement
> {
  text?: string;
};
export const Image: FC<PropsWithRef<ImageProps>> = (props) => (
  <Img src="" alt="" {...props} />
);

基礎實例

import React from 'react'
import styled from 'styled-components/native'

const StyledView = styled.View`
  background-color: papayawhip;
`;
const StyledText = styled.Text`
  color: palevioletred;
`;

class MyReactNativeComponent extends React.Component {
  render() {
    return (
      <StyledView>
        <StyledText>Hello World!</StyledText>
      </StyledView>
    );
  }
}

React Native 中寫 CSS

import styled from 'styled-components/native'

const RotatedBox = styled.View`
  transform: rotate(90deg);
  text-shadow-offset: 10px 5px;
  font-variant: small-caps;
  margin: 5px 7px 2px;
`;

function Example() {
  return (
    <RotatedBox />
  )
}

與 web 版本的一些區別是，您不能使用關鍵幀(keyframes)和 createGlobalStyle 助手，因為 React Native 不支持關鍵幀或全局樣式。如果您使用媒體查詢或嵌套 CSS，我們也會警告您。

主題化

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

// 定義我們的按鈕，但這次使用 props.theme
const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;

  /* 使用 theme.main 為邊框和文本著色 */
  color: ${props => props.theme.main};
  border: 2px solid ${props => props.theme.main};
`;

// 我們正在為未包裝在 ThemeProvider 中的按鈕傳遞默認主題
Button.defaultProps = {
  theme: {
    main: "palevioletred"
  }
}

// 定義 props.theme 的外觀
const theme = {
  main: "mediumseagreen"
};

render(
  <div>
    <Button>Normal</Button>

    <ThemeProvider theme={theme}>
      <Button>Themed</Button>
    </ThemeProvider>
  </div>
);

功能主題

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

// 定義我們的按鈕，但這次使用 props.theme
const Button = styled.button`
  color: ${props => props.theme.fg};
  border: 2px solid ${props => props.theme.fg};
  background: ${props => props.theme.bg};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
`;
// 在主題上定義我們的`fg`和`bg`
const theme = {
  fg: "palevioletred",
  bg: "white"
};

// 這個主題交換了`fg`和`bg`
const invertTheme = ({ fg, bg }) => ({
  fg: bg,
  bg: fg
});

render(
  <ThemeProvider theme={theme}>
    <div>
      <Button>默認主題</Button>
      <ThemeProvider theme={invertTheme}>
        <Button>反轉主題</Button>
      </ThemeProvider>
    </div>
  </ThemeProvider>
);

通過 withTheme 高階組件

import { withTheme } from 'styled-components'

class MyComponent extends React.Component {
  render() {
    console.log('Current theme: ', this.props.theme)
    // ...
  }
}

export default withTheme(MyComponent)

useContext 鉤子

import { useContext } from 'react'
import { ThemeContext } from 'styled-components'

const MyComponent = () => {
  const themeContext = useContext(ThemeContext)
  
  console.log('Current theme: ', themeContext)
  // ...
}

主題 props

import {
  ThemeProvider,
  styled
} from 'styled-components';

// 定義我們的按鈕
const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  /* 使用 theme.main 為邊框和文本著色 */
  color: ${props => props.theme.main};
  border: 2px solid ${props => props.theme.main};
`;
// 定義主題的外觀
const theme = {
  main: "mediumseagreen"
};

使用自定義主題組件

render(
  <div>
    <Button theme={{ main: "royalblue" }}>
      特設主題
    </Button>
    <ThemeProvider theme={theme}>
      <div>
        <Button>Themed</Button>
        <Button
          theme={{ main: "darkorange" }}
        >
          被覆蓋
        </Button>
      </div>
    </ThemeProvider>
  </div>
);

Refs

import {
  ThemeProvider,
  styled
} from 'styled-components';

const Input = styled.input`
  border: none;
  border-radius: 3px;
`;

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  render() {
    return (
      <Input
        ref={this.inputRef}
        placeholder="Hover to focus!"
        onMouseEnter={() => {
          this.inputRef.current.focus()
        }}
      />
    );
  }
}

使用 Form 組件

function Example() {
  return (
    <Form />
  )
}

特異性問題

在文件 MyComponent.js 中定義 MyComponent 組件。

const MyComponent = styled.div`
  background-color: green;
`;

定義樣式 my-component.css

.red-bg {
  background-color: red;
}

使用 MyComponent 組件

<MyComponent className="red-bg" />

由于某種原因，這個組件仍然有綠色背景，即使你試圖用 red-bg 類覆蓋它！

解決方案

.red-bg.red-bg {
  background-color: red;
}

ThemeProvider

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

const Box = styled.div`
  color: ${props => props.theme.color};
`;

const Example = () => (
  <ThemeProvider theme={{ color: 'mediumseagreen' }}>
    <Box>I'm mediumseagreen!</Box>
  </ThemeProvider>
);

shouldForwardProp

const Comp = styled('div').withConfig({
  shouldForwardProp: (prop, defaultValidatorFn) =>
      !['hidden'].includes(prop) && defaultValidatorFn(prop),
}).attrs({ className: 'foo' })`
  color: red;
  &.foo {
    text-decoration: underline;
  }
`;

const Example = () => (
  <Comp hidden draggable="true">
    Drag Me!
  </Comp>
);

亚洲成A人片在线观看网站_成年网站免费视频A在线双飞_日日日日做夜夜夜夜无码_久久夜色撩人精品国产小说

入門

安裝