悬停时如何使用"样式"更改其他元素

Question

我是Mui的新手，正在尝试将动画应用于组件。

我想做的是，我有四个相同的组件，每个组件都有自己的图像。

<MyComponent>some images...</MyComponent>
<MyComponent>some images...</MyComponent>
<MyComponent>some images...</MyComponent>
<MyComponent>some images...</MyComponent>
const MyComponent = styled("div")((theme) => ({
//... some styles. 
// scale up when hovered
'&:hover': {
transform: "scale(1.2)",
marginRight: "20px",

}
}));

如果我悬停一个<MyComponent>，我想放大悬停的一个，缩小其他的。

是否有办法通过使用styled来定义这样的动作??

Answer 1

我将设置一个状态，然后使用条件来更改样式。即

const [hoverState, setHoverState] = useState(false);

<MyComponent
onMouseOver={setHoverState(true)}
onMouseOut={setHoverState(false)}
style={hoverState ? {transform: "scale(1.2)",marginRight: "20px",} : ''}
>
some images...
</MyComponent>

Answer 2

您可以对css和styled-components执行此操作。

注意，styled函数不是直接调用的，而是传递一个模板字面量。在模板文本中，你可以编写正则css表达式。

codesandbox

const MyComponent = styled.div`
transform: scale(1);
margin-right: 0px;
:hover {
transform: scale(1.2);
margin-right: 20px;
}
`;