你能解释一下如何使用带有自定义属性名称的 SC 吗?
这code不起作用,我不明白为什么。
我希望收到这样的 <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>
);
}
最佳答案
对于海关数据属性,您需要使用前缀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;
`;
关于reactjs - 如何使用样式化组件创建自定义属性名称?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66067776/