styled-conentattrs()について

私はプロジェクトで.attrs()を使っているのを見て、名前から大体いくつかの属性を取って、それから書き終わったのかもしれません.
より具体的な使い方を知ることにしました
ブログは会社が知らない内容や不足を補うために始まったので、styled-componses自体の説明は省略します.

1. attrs()

名前の通りattributesを挿入する方法で、オブジェクトタイプのargを受け入れます.

const Input = styled.input.attrs(props => ({
  // we can define static props
  type: "text",

  // or we can define dynamic ones
  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};
`;

render(
  <div>
    <Input placeholder="A small text input" />
    <br />
    <Input placeholder="A bigger text input" size="2em" />
  </div>
);

2.passingpropsとの違い

styled-componentsを使ったことがあるなら、道具を伝えることについて知っているはずです.attrs()モードと非常に似ているので、コードを初めて見たときも2つの違いは感じられませんでした.
そこで何が違うのか確認しました.

import styled from "styled-components";

const PassingPropsButton = styled.button`
  all: unset;
  padding: 1rem;
  background-color: ${(props) => props.bg};
  color: white;
  margin-right: 1rem;
`;

const UseAttrsButton = styled(PassingPropsButton).attrs((props) => ({
  bg: "red",
  color: "blue",
}))`
  background-color: ${({ bg }) => bg};
  color: ${({ color }) => color};
`;

function App() {
  return (
    <div>
      <PassingPropsButton bg="green">BTN</PassingPropsButton>
      <UseAttrsButton>BTN</UseAttrsButton>
    </div>
  );
}

export default App;

外観上、何の違いも感じない

しかし、検査員は私が変更点を見つけることができることに気づいた.attrs()を使用すると、オンラインスタイルに適しています.
検索stack overlfowを試してみたら、違うところを発見
TL; DR

Use styled components for static styles and dynamic styles that don't change very often;

Use inline styles (through .attrs) for styles that change frequently, like for animations.

const CheckboxInput = styled.input.attrs({ type: "checkbox" })`
   margin: 10px;
`;

attrs()を使用し、上記のように<CheckboxInput />を使用するたびにtype="checkbox"を追加する必要はありません.
すなわち、htmlタグが持つ固有の属性を追加して再利用可能なコンポーネントを作成する場合に、attrs()を使用することが有用である

3. TL; DR

attrs()はオンライン方式を採用している.attrs()本来の目的はhtml tagが持つ固有属性の重複使用を避けることである
ex.2457912作成時に<input type="checkbox" />を使用attrs({ type: checkbox })はattrs()よりも相対的に軽いので、動画などで常にスタイルを変える作業に使えば、メモリを効率よく使用できます
+24579142を使用すると、argとして関数を受信してオブジェクトを返すべきであることがわかります.例えば、generates a CSS classはオブジェクト自体です('attrs({...})入れても正常に作動します

*Reference

styled-components documentation : .attrs

styled-components documentation : Attaching additional props

When do I use attrs vs passing props directly with styled-components?

[Styling]Styledコンポーネントを理解して使用します!(with React) 💅