[英]Emotion CSS-in-JS - how to add conditional CSS based on component props?
我想要一个带有Emotion样式的组件,它采用最终控制样式的道具。 例如,考虑一个GridCol
组件,它有各种改变内边距和宽度的道具(宽度可以在不同的视口宽度之间改变)。
我想使用这样的 API:
<GridCol gutter size="2>
// or alternatively, like this:
<GridCol gutter size={{
m: 2,
l: 4
}}>
这里发生了三件事:
gutter
是一个布尔道具,它向列添加一些水平填充size
道具可以是字符串或对象。 如果它是一个字符串,我们只需添加几行 CSS 就可以了,但是,如果它是一个对象,我们需要根据在别处设置的断点对象插入一些媒体查询。Emotion 的文档不清楚如何处理这种性质的样式,至少我没有见过,所以我希望能找到一个通用的解决方案。
对于gutter
道具,它是微不足道的:
const GridCol = props => styled('div')`
display: block;
box-sizing: border-box;
flex: 1 0 0;
min-width: 0;
padding: ${props.gutter ? `0 10px` : '0'};
`
对于size
道具,它变得更加复杂,我希望生成的 CSS 看起来像这样:
const GridCol = props => styled('div')`
display: block;
box-sizing: border-box;
flex: 1 0 0;
min-width: 0;
padding: ${props.gutter ? `0 10px` : '0'};
/* styles here if `size` is a string */
width: 10%;
/* styles here if `size` is an object */
@media screen and (min-width: 500px) {
width: 20%;
}
@media screen and (min-width: 800px) {
width: 30%;
}
@media screen and (min-width: 1100px) {
width: 40%;
}
`
width
值将由 prop 的 key 决定,它对应于breakpoints
对象中的一个值,这部分不是微不足道的,但我不知道如何动态生成所需的 css。
我确定我可以添加更多信息,我进行了一些尝试,但目前都没有工作。 我的感觉是我应该创建一个无状态的功能组件,为每个条件生成 css,然后在最后加入 CSS..
这是一个很好的问题。 首先,避免这种模式。
const GridCol = props => styled('div')`
display: block;
box-sizing: border-box;
flex: 1 0 0;
min-width: 0;
padding: ${props.gutter ? `0 10px` : '0'};
`
在这个例子中,在每次渲染时都会创建一个新的样式组件,这对性能来说很糟糕。
任何表达式或插值都可以是函数。 此函数将接收 2 个参数: props
和context
const GridCol = styled('div')`
display: block;
box-sizing: border-box;
flex: 1 0 0;
min-width: 0;
padding: ${props => props.gutter ? `0 10px` : '0'};
`
至于您示例中的size
道具,我将使用以下模式。
import { css } from 'emotion'
const sizePartial = (props) => typeof props.size === 'string' ?
css`width: 10%;` :
css`
@media screen and (min-width: 500px) {
width: 20%;
}
@media screen and (min-width: 800px) {
width: 30%;
}
@media screen and (min-width: 1100px) {
width: 40%;
}
`
然后,您可以像在表达式中出现的任何其他函数一样使用部分。
const GridCol = styled('div')`
display: block;
box-sizing: border-box;
flex: 1 0 0;
min-width: 0;
padding: ${props => props.gutter ? `0 10px` : '0'};
${sizePartial};
`
这是一个非常强大的模式,可用于在您的项目中组合可重用的动态样式。
如果您对利用此模式的其他库感兴趣,请查看https://github.com/emotion-js/facepaint和https://github.com/jxnblk/styled-system
如果您正在寻找一种使用 Emotion 的css
道具实现条件样式的方法,您可以执行以下操作:
import { css } from '@emotion/core';
const styles = ({ isSelected }) => css`
border: solid 1px black;
border-radius: 10px;
padding: 16px;
cursor: pointer;
${isSelected === true &&
`
background-color: #413F42;
color: white;
`}
`;
const ConditionalComponent = () => {
const [isSelected, setIsSelected] = useState(false);
return (
<div css={styles({ isSelected })} onClick={() => setIsSelected(!isSelected)}>
Click here to change styles.
</div>
);
};
此处有更多详细信息: https : //seanconnolly.dev/emotion-conditionals
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.