带有样式组件的可重用参数化 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}
`;