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

当你在另一个组件中使用它时，它应该能够访问它的属性:

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

还可以为每个样式化的组件提供单独的 props，这些可以通过 attrs 方法传递:

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