我使用了stylled组件,我想设置CSS属性的 transform
到。
我在网上没有找到太多信息,所以我尝试了类似的方法。
const altDirectionFunc = (props) => {
if (props.altDirection === 'row') {
return 'translate(30%, -50%)'
} else if (props.altDirection === 'column') {
return 'translate(-50%, 30%)'
} else {
return null
}
}
const StyledCheckbox = styled.div`
position: relative;
height: 2.5em;
width: 2.5em;
background: ${props => props.isChecked ? props.theme : 'transparent'};
border-radius: 10px;
border: 2px solid ${props => props.isChecked ? props.theme : vars.black};
cursor: pointer;
transition: all 400ms ease;
border-radius: ${props => props.circular ? '50%' : null};
&::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: '${props => props.isChecked ? '\f00c' : null}';
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -45%);
font-weight: 900;
font-size: 1.2em;
transition: all 400ms ease;
line-height: 16px;
}
&::after {
content: '${props => props.altText}';
opacity: ${props => props.isChecked ? '1' : '0'};
transition: all 400ms ease;
color: ${vars.black};
position: absolute;
left: 50%;
top: 50%;
width: max-content;
transform: '${altDirectionFunc}'; // That's what matters
font-family: ${vars.mainFont};
}
`;
//
<StyledTextField size={size} initalValue={initalValue} onChange={handleChange}
fontFamily={fontFamily} theme={theme} {...otherProps} value={value} dir={direction}/>
但是,我并没有得到我想要的结果,如果我通过... altDirection="row"
或 altDirection="column"
怎么解决呢?
好像没有调用变换。
P.S. 我以前用过三元运算符,但这个更简洁。是不能使用这样的函数还是我做错了?
如果我对你的问题理解正确,你希望你的样式组件调用一个自定义函数(即 altDirectionFunc
)的值,以获得 transform
属性。
在你的例子中,你的样式的语法(用 '
周围 altDirectionFunc
)会导致你的组件被评估为不正确的样式。将其修改为以下内容将允许 altDirectionFunc
以期在评估风格化组件时正确调用,并达到预期的结果。
transform: ${ (props) => altDirectionFunc(props) };
下面是一个完整的例子
const altDirectionFunc = (props) => {
if (props.altDirection === 'row') {
return 'translate(30%, -50%)'
} else if (props.altDirection === 'column') {
return 'translate(-50%, 30%)'
} else {
return 'unset' // Update this
}
}
const StyledCheckbox = styled.div`
position: relative;
height: 2.5em;
width: 2.5em;
background: ${props => props.isChecked ? props.theme : 'transparent'};
border-radius: 10px;
border: 2px solid ${props => props.isChecked ? props.theme : vars.black};
cursor: pointer;
transition: all 400ms ease;
border-radius: ${props => props.circular ? '50%' : null};
&::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: ${props => props.isChecked ? '\f00c' : null}; // Fixed this too
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -45%);
font-weight: 900;
font-size: 1.2em;
transition: all 400ms ease;
line-height: 16px;
}
&::after {
content: ${props => props.altText}; // Fixed this too
opacity: ${props => props.isChecked ? '1' : '0'};
transition: all 400ms ease;
color: ${vars.black};
position: absolute;
left: 50%;
top: 50%;
width: max-content;
transform: ${ (props) => altDirectionFunc(props) }; // The fix
font-family: ${vars.mainFont};
}
`;