reactjs - 如何使用样式组件创建自定义属性名称？

Question

你能解释一下如何使用带有自定义属性名称的 SC 吗？

这段代码不起作用，我不明白为什么。

我希望收到这样的<div customAttrName="customAttrName"></div>

export const TagName = styled.div.attrs((props) => {
  console.log("props", props);
  return {
    type: "anyType",
    size: 25,
    customAttrName: "customAttrName"
  };
})`
  padding: 4px 7px 2px 10px;
  margin: 5px 6px 5px 0;
  border-radius: 5px;
  font-family: "MullerRegular", sans-serif;
`;

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <TagName>Start editing to see some magic happen!</TagName>
    </div>
  );
}

标签： reactjsstyled-components

Answer 1

对于海关数据属性，您需要使用前缀data-*：

export const TagName = styled.div.attrs((props) => {
  console.log("props", props);
  return {
    type: "anyType",
    size: 25,
    data-customAttrName: "customAttrName"
  };
})`
  padding: 4px 7px 2px 10px;
  margin: 5px 6px 5px 0;
  border-radius: 5px;
  font-family: "MullerRegular", sans-serif;
`;

使用数据属性