Javascript 如何在样式化组件中执行条件悬停?
我有一个基于某些道具的组件,我希望能够在悬停时更改背景。但基于其他道具,hover应该什么都不做。这可能吗Javascript 如何在样式化组件中执行条件悬停?,javascript,reactjs,styled-components,Javascript,Reactjs,Styled Components,我有一个基于某些道具的组件,我希望能够在悬停时更改背景。但基于其他道具,hover应该什么都不做。这可能吗 export const Container = styled.div` &:hover { background: ${({ shouldHover }) => shouldHover ? 'red' : '' }; } ` 然而,这不起作用。有什么建议可以这样做吗?您可以尝试以下方法,这可能会有所帮助: import { css, st
export const Container = styled.div`
&:hover {
background: ${({ shouldHover }) => shouldHover ? 'red' : '' };
}
`
然而,这不起作用。有什么建议可以这样做吗?您可以尝试以下方法,这可能会有所帮助:
import { css, styled } from 'styled-components'
styled.div`
${props => props.shouldHover && css`
&:hover {
background: 'red';
}
`}
`
这对我有用
import React from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";
const Container = styled.div`
& > h2 {
&:hover {
background: ${props => (props.shouldHover ? "red" : "none")};
}
}
`;
function App({ shouldHover }) {
return (
<Container shouldHover>
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic shappen!</h2>
</Container>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App shouldHover />, rootElement);
从“React”导入React;
从“react dom”导入react dom;
从“样式化组件”导入样式化;
const Container=styled.div`
&>h2{
&:悬停{
背景:${props=>(props.shouldHover?“红色”:“无”);
}
}
`;
函数App({shouldHover}){
返回(
你好,代码沙盒
开始编辑以查看一些神奇的形状笔!
);
}
const rootElement=document.getElementById(“根”);
ReactDOM.render(这将起作用:
export const Container = styled.div`
${ props => props.shouldHover
? '&:hover { background: red }'
: ''
}
`;
您可以根据传递的道具设置背景条件。下面是一个示例,其中div根据多个不同的条件进行更改
const Container = styled.div`
background: blue;
&:hover {
background: ${props => props.shouldHoverRed
? 'red'
: props.shouldHoverGreen
? 'green'
: props.shouldHoverOrange
? 'orange'
: 'blue'
};
}
`
默认值为蓝色,根据传递的道具,它将在悬停时为背景呈现不同的颜色。可能的重复