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

Question

我使用样式化组件，我想将 transform 设置为：

如果条件为真，则值 x，
如果条件 2 为真，则值 y，
如果 none 为真，则为空。

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

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

    }
`;

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

Use custom function for CSS property in styled-components?

javascript

if-statement

ternary

reactjs

styled-components

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

Use custom function for CSS property in styled-components?

javascript

if-statement

ternary

reactjs

styled-components

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