[英]Create dynamic tags with Styled Components
Is there a way to create a dynamic tag using styled-components?有没有办法使用样式组件创建动态标签? For example:
例如:
const MyComponent = styled(CustomTag)``;
<MyComponent element="h1" />
You can use as
prop by default on components created with styled-components.默认情况下,您可以在使用 styled-components 创建的组件上使用
as
prop。 If in your example CustomTag
is also a styled-component that styles a native element (eg:)如果在您的示例中
CustomTag
也是一个样式化组件,它设置了原生元素的样式(例如:)
const CustomTag = styled.h1`
color: red;
`;
then you can do那么你可以做
const MyComponent = styled(CustomTag)`
font-size: 64px;
`;
<MyComponent as="span">Something</MyComponent>
and you'll end up with a <span>
tag with font-size
of 64px and red text color.你最终会得到一个
font-size
为 64px 和红色文本颜色的<span>
标签。 Of course you can also use as
prop on CustomTag
so you don't necessarily need MyComponent
.当然,您也可以在
CustomTag
上使用as
prop,因此您不一定需要MyComponent
。
Maybe this will help you:也许这会帮助你:
Add you code in your typescript在你的打字稿中添加你的代码
class Test extends HTMLElement {
connectedCallback() {
this.innerHTML = `<h1>Hello World...</h1>`;
this.style.color = "red";
}
}
customElements.define('test', Test);
after compiling refer the js file in you HTML and you can use it like <test></test>
编译后在你的 HTML 中引用 js 文件,你可以像
<test></test>
一样使用它
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.