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};
`

每个样式组件还可以具有单独的道具，可以通过attrs方法传递这些道具：

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

具有样式化组件的可重用参数CSS

1 个答案: