多个条件在样式组件中不起作用答案

【问题标题】：Multiple Conditions not working in Styled-Component多个条件在样式组件中不起作用
【发布时间】：2020-09-06 16:27:00
【问题描述】：

我正在创建表单按钮，其中有些是主要的，有些是次要的。在他们身上，我会应用 UX 颜色代码。第一个有效，第二个无效。

我是不是做错了什么？

代码如下：

const FormActionBtns = styled.span`
  height: 50px;
  max-width: 100px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
  color: white;

  ${props => props.theme && props.theme.ACCENT && `
    font-size: ${props.theme.FONT_SIZE.TOPIC_HEADER};
    color: ${props.theme.PRIMARY_STAGE.FORM_COMPONENTS.FONT.REVERSE_BRIGHT};

    ${props.isPrimary && `
        background-color: ${props.theme.ACCENT.IDLE}; 
    `}

    ${props.isSecondary && `
        background-color: ${props.theme.COMPLEMENTARY.IDLE}; 
    `}
  `}
`;

export const SubmitBtn = (props) => {
    console.log(props);
    return(
        <FormActionBtns isPrimary={true}>
            {props.submitTxt}
        </FormActionBtns>
    )
}

export const RevertBtn = (props) => {
    return (
        <FormActionBtns isSecondary={true}>
            {props.revertTxt}
        </FormActionBtns>
    )
}

提交按钮非常出色，因为根据主题应用了正确的强调色。通过 isSecondary=true 后，重置按钮无法正常工作。

注意：当我从样式中删除条件 isPrimary 时，Reset 会给出正确的结果

【问题讨论】：

为什么不用正则语法，然后转换成这些繁琐的标记模板？
@GalAbra：你能举例说明一下吗？

标签： reactjs styled-components

【解决方案1】：

为了在 React 中动态实现 CSS，我只需使用 style 属性，类似于以下代码：

const FormActionBtns = (props) => {
  const styleProp = { height: '50px', maxWidth: '100px' }; // etc.
  if (props.isPrimary) {
    styleProp.backgroundColor = props.theme.ACCENT.IDLE;
  } else if (props.isSecondary) {
    styleProp.backgroundColor = props.theme.COMPLEMENTARY.IDLE;
  }

  return (
    <span style={styleProp}>
      {props.children}
    </span>
  );
}

【讨论】：

酷。明白了。顺便一提。我也找到了解决方案。整个条件需要重复。我想使用样式化组件的原因是让它成为一种可读的样式结构。

【解决方案2】：

您也可以使用.attrs。

styled.span.attrs(({ isPrimary, theme }) => ({
  background-color: isPrimary ? theme.ACCENT.IDLE : theme.COMPLEMENTARY.IDLE;
}))
`
 // other styles
`

【讨论】：

【解决方案3】：

你少了一个分号：

 ${props.isPrimary && `
     background-color: ${props.theme.ACCENT.IDLE}; 
 `}; // here

  ${props.isSecondary && `
     background-color: ${props.theme.COMPLEMENTARY.IDLE}; 
 `}

【讨论】：

非常感谢你！此外，重复整个条件也可以，但是是的，这很脏。