使用樣式化組件創建動態標簽

Question

有沒有辦法使用樣式組件創建動態標簽？ 例如：

const MyComponent = styled(CustomTag)``;

<MyComponent element="h1" />

Answer 1

默認情況下，您可以在使用 styled-components 創建的組件上使用as prop。 如果在您的示例中CustomTag也是一個樣式化組件，它設置了原生元素的樣式（例如：）

const CustomTag = styled.h1`
  color: red;
`;

那么你可以做

const MyComponent = styled(CustomTag)`
  font-size: 64px;
`;

<MyComponent as="span">Something</MyComponent>

你最終會得到一個font-size為 64px 和紅色文本顏色的<span>標簽。 當然，您也可以在CustomTag上使用as prop，因此您不一定需要MyComponent 。

Answer 2

也許這會幫助你：

在你的打字稿中添加你的代碼

class Test extends HTMLElement {
    connectedCallback() {
        this.innerHTML = `<h1>Hello World...</h1>`;
        this.style.color = "red";
    }
}

customElements.define('test', Test);

編譯后在你的 HTML 中引用 js 文件，你可以像<test></test>一樣使用它