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

我在react应用程序中使用样式化组件库，我遇到了一个有趣的问题，我无法找到一个优雅的在线解决方案。我想要实现的是有一段可重用的代码，可能类似于sass mixin，它允许我用代码扩展我所有的按钮，使悬停时背景变暗

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",
    })}
`;

const DarkenHover=css`
背景色：${p=>（p.active？p.normalColor:p.activeColor）}；
&：悬停{
背景色：${p=>变暗（0.1）（p.active？p.normalColor:p.activeColor）}；
}
过渡色：背景色。1s容易进入；
`;
const FooButton=styled.div`
${p=>DarkenHover({
主动的，主动的，
正常颜色：“红色”，
activeColor:“蓝色”，
})}
`;
const FooButton=styled.div`
${p=>DarkenHover({
主动的，主动的，
正常颜色：“白色”，
activeColor:“绿色”，
})}
`;

---

这显然是无效的语法，但它演示了我的用例。如何将此

DarkenHover

css对象与属性一起使用？

您可以将样式保存在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对象的不同用途传递不同的属性（示例中的

normalColor

和

activeColor

道具）。渲染组件时，可以将它们作为道具传递给组件<代码>。这也不是解决方案。我想为样式化组件定义它们，而不是为它的每种用法定义它们。如果您想为每个样式化组件定义它们，您可以通过

attrs

：

const FooButton=styled.div.attrs（{normalColor:'#000000'}）

${animation}`是的，这似乎有效，但他们必须有匹配的名字。这是最好的解决方案吗？