Javascript 在样式化组件中使用CSS属性的自定义函数？

我使用样式化组件，我想将

转换设置为：


如果条件为真，则值x
如果条件2为真，则为y值
如果没有为true，则为null

我在网上找不到太多信息，所以我尝试了以下方法：

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}/>

const altDirectionFunc=（道具）=>{
如果（props.altDirection=='row'）{
返回“翻译（30%，-50%）”
}else if（props.altDirection=='column'）{
返回“翻译（-50%，30%）”
}否则{
返回空
}
}
const StyledCheckbox=styled.div`
位置：相对位置；
高度：2.5em；
宽度：2.5em；
背景：${props=>props.isChecked？props.theme:'transparent'}；
边界半径：10px；
border:2px solid${props=>props.isChecked？props.theme:vars.black}；
光标：指针；
过渡：所有400ms缓解；
边界半径：${props=>props.circular？'50%'：null}；
&：：之前{
字体系列：“字体真棒5免费”；
字号：900；
内容：“${props=>props.isChecked？”\f00c:null}”；
颜色：白色；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-45%）；
字号：900；
字体大小：1.2米；
过渡：所有400ms缓解；
线高：16px；
}
&：：之后{
内容：“${props=>props.altText}”；
不透明度：${props=>props.isChecked？'1'：'0'}；
过渡：所有400ms缓解；
颜色：${vars.black}；
位置：绝对位置；
左：50%；
最高：50%；
宽度：最大含量；
转换：“${altDirectionFunc}”；//这才是最重要的
字体系列：${vars.mainFont}；
}
`;
//

但是，我没有得到我想要的结果，如果我通过
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};

    }
`;

请举一个完整的例子，显示使用
altDirectionFunc
的组件添加了一个示例您的示例确实有效。可能是输入错误：
transform:${altDirectionFunc}；//不是“${altDirectionFunc}”
，现在不存在“”，但它仍然不起作用。。当我使用devtoolsTransage时，转换似乎没有显示在样式中，就像我使用devtoolsTransage时转换没有显示在样式中一样-您是否将
altText
属性作为字符串传递？还有，你是否应用了我的答案中显示的其他修复方法？这很奇怪-在这种情况下它应该会起作用。我这里有一个关于这个概念的例子：你能用这个交叉检查你的代码吗？它现在可以工作了，我改变了一些东西，现在一切正常了。谢谢