帶有樣式組件的可重用參數化 css

Question

我在我的 React 應用程序中使用了樣式組件庫，但遇到了一個有趣的問題，我無法在線找到優雅的解決方案。 我想要實現的是擁有一段可重用的代碼，可能類似於 sass mixins，這將允許我使用代碼擴展我的所有按鈕，這些代碼在懸停時使背景變暗。

const DarkenHover = css<{ active?: boolean; normalColor: string; activeColor: string }>`
    background-color: ${p => (p.active ? p.normalColor : p.activeColor)};
    &:hover {
        background-color: ${p => darken(0.1)(p.active ? p.normalColor : p.activeColor)};
    }
    transition: background-color .1s ease-in;
`;

const FooButton = styled.div<{ active?: boolean }>`
    ${p => DarkenHover({
        active: p.active,
        normalColor: "red",
        activeColor: "blue",
    })}
`;

const FooButton = styled.div<{ active?: boolean }>`
    ${p => DarkenHover({
        active: p.active,
        normalColor: "white",
        activeColor: "green",
    })}
`;

這顯然不是有效的語法，但它演示了我的用例。 如何使用此具有屬性的DarkenHover css 對象？

Answer 1

您可以將樣式保存在 var 中並稍后重用。

const animation = css`
 background-color: ${p => p.active ? ThemeColors.backgroundDark : "white"};
    &:hover {
        background-color: ${p =>  darken(0.1)(p.active ? p.normalColor : p.activeColor)};
    }
    transition: background-color .1s ease-in;
 }
`;

當你在另一個組件中使用它時，它應該能夠訪問它的 props：

const FooButton = styled.div`
    ${animation};
`

此外，為了能夠為每個樣式組件擁有單獨的道具，可以通過attrs方法傳遞這些道具：

const FooButton = styled.div.attrs({normalColor: '#000000' })`
   ${animation}
`;