带有样式组件的可重用参数 css

Question

我在我的 react 应用程序中使用 styled-components 库，我遇到了一个有趣的问题，我无法在网上找到一个优雅的解决方案。我想要实现的是拥有一段可重用的代码，可能类似于 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}
`;