重寫第三方組件

我在我的應用程序中有一個按鈕組件，我想使其具有主題化。爲此，我創建了一個ThemeableButton.js，並且我想使用樣式（Button）重寫Button組件。重寫第三方組件

我不使用內聯樣式，所以我的想法是，我的Button組件沒有定義任何樣式，也不知道有關樣式組件的任何內容。

我以爲overriding 3rd party components會做這項工作，但它不適合我。我創建了一個webpackbin示例here。

我的問題是在ThemeableButton.js。這裏：

const StyledButton = styled(Button)` 
     background: ${(props) => props.theme.primaryColor }; 
     border: 2px solid ${(props) => props.theme.borderColor }; 
     color: ${(props) => props.theme.textColor }; 
    `;

我期待這個工作，重寫我的Button.js組件並添加樣式道具。當然，如果我定義StyledButton這樣

const StyledButton = styled.button

它的工作原理，但這個想法是重寫我的部件。我將有更復雜的組件，我不想使用樣式化的構造函數進行定義。

如何使這項工作的任何想法？

謝謝！

來源

2016-12-26 Daniel Estevez

中有部分的底部你指的https://github.com/styled-components/styled-components#third-party-components

註記：風格組件生成類真正的樣式表。類名然後通過className prop傳遞給反應組件（包括第三方組件）。對於要應用的樣式，第三方組件必須將傳入的className prop附加到DOM節點。有關更多信息，請參閱使用帶有現有CSS的樣式化組件。

你需要使用的className道具在你Button.js，使其工作

來源

2016-12-26 22:25:22

這是正確的答案！ :)（風格 - 組件共同創造者在這裏） – mxstbr

新的鏈接可以從https://www.styled-components.com/docs/basics#styling-any-components –

重寫第三方組件

回答

相關問題