如何书写联动样式#
有时候我们需要实现在 hover 容器组件的时候，修改 child 的样式。这种情况下，我们可以使用 cx 来生成 className。
Demo#
核心代码：
const useStyles = createStyles(({ css, cx }) => {
// 1. 使用 cx 包裹 css，得到 (acss-xxx) 类名
const child = cx(css`
background: red;
width: 100px;
height: 100px;
`);
return {
parent: css`
cursor: pointer;
&:hover {
// 2. 实现级联
.${child} {
background: blue;
}
}
`,
// 3. 导出 child className
child,
};
});
原理解析#
思路上很简单，因为 css 方法产出的始终是序列化样式对象。用 cx 包裹 css 对象，就会将该对象转成类名 (acss-xxxx)。