在styled-components中对CSS属性使用自定义函数？

Question

我使用了stylled组件，我想设置CSS属性的 transform 到。

• 如果条件为真，则为x值。
• 如果条件2为真，数值y。
• 如果没有为真，则为空。

我在网上没有找到太多信息，所以我尝试了类似的方法。

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. 我以前用过三元运算符，但这个更简洁。是不能使用这样的函数还是我做错了？

Answer 1

如果我对你的问题理解正确，你希望你的样式组件调用一个自定义函数（即 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};

    }
`;