How to Write Linked Styles#
Sometimes we need to modify the style of a child component when hovering over the container component. In this case, we can use cx to generate a className.
Demo#
Core code:
const useStyles = createStyles(({ css, cx }) => {
// 1. Use cx to wrap css and get the className (acss-xxx)
const child = cx(css`
background: red;
width: 100px;
height: 100px;
`);
return {
parent: css`
cursor: pointer;
&:hover {
// 2. Implement cascading
.${child} {
background: blue;
}
}
`,
// 3. Export the child className
child,
};
});
Principle Analysis#
The idea is simple because the css method always produces a serialized style object. Wrapping the css object with cx will convert the object into a className (acss-xxxx).