如何处理样式组件中的条件

Question

我正在使用带样式的组件和 ThemeProvider 为我的应用程序添加主题支持。有问题的组件已经有条件显示基于 prop 的样式。当我引入主题时，我无法在边框上获得我需要的样式属性。他们只是被忽略了。如果用十六进制值替换它们，我可以看到边框。

const Wrapper = styled.div`
  position: relative;
  width: 100px !important;
  height: 130px !important;
  opacity: ${({ isDragging }) => (isDragging ? 0.25 : 1)};
  border: ${({ isSelected }) =>
    isSelected
      ? `1px solid ${props => props.theme.CYAN}`
      : `1px solid ${props => new Color(props.theme.CYAN).alpha(0.25)}`};
  text-align: center;
  padding: 10px !important;
  margin: 4px !important;
  box-shadow: none;
  border-radius: 0;
  cursor: pointer;
  box-sizing: border-box;
  background-color: ${({ isSelected }) =>
    isSelected
      ? props => new Color(props.theme.CYAN).alpha(0.25)
      : props => props.theme.DARK} !important;

  & :hover {
    border-color: ${props => props.theme.CYAN};
    box-shadow: none;
  }
}

<Wrapper
        isDragging={isDragging}
        isSelected={isSelected}
        onClick={onClick}
        className="daily-item"
      >


export const CLASSIC_THEME = {
  DARK: '#282a2b',
  LIGHT: 'white',
  CYAN: '#2edaf4',
  GREEN: '#26fba3',
  PURPLE: '#6f24bd',
  PINK: '#dd2df4',
  LIGHT_PURPLE: '#6d47f6',
  RED: '#f42d61',
  GREY: '#a6a6a6',
};

export const PRIMARY_THEME = {
  DARK: '#1f2630',
  LIGHT: '#EEEEFF',
  CYAN: '#BFC0C0',
  GREEN: '#9FB4C7',
  PURPLE: '#6f24bd',
  PINK: '#C89047',
  LIGHT_PURPLE: '#6d47f6',
  RED: '#f42d61',
  GREY: '#a6a6a6',
};

我知道这些键没有准确描述十六进制值 :) 我会讲到

Answer 1

props.theme.CYAN 是什么样子的？正如你所说，如果你用十六进制替换它，它就会起作用，这让我相信问题可能不是条件性的，而是 new Color(props.theme.CYAN).alpha(0.25).

Answer 2

您在样式 div 上使用标记的模板文字，这就是您获取 props 引用的方式。但是，在您的方法中，我注意到您从道具中解构了 isSelected 属性，然后尝试通过在内部添加另一个箭头函数来使用道具，这不是标记模板文字的一部分。我猜这就是为什么它不起作用的原因。请尝试以下操作：

const Wrapper = styled.div`
  position: relative;
  width: 100px !important;
  height: 130px !important;
  opacity: ${({ isDragging }) => (isDragging ? 0.25 : 1)};
  border: ${props =>
    props.isSelected
      ? `1px solid ${props.theme.CYAN}`
      : `1px solid ${new Color(props.theme.CYAN).alpha(0.25)}`};
  text-align: center;
  padding: 10px !important;
  margin: 4px !important;
  box-shadow: none;
  border-radius: 0;
  cursor: pointer;
  box-sizing: border-box;
  background-color: ${props =>
    props.isSelected
      ? new Color(props.theme.CYAN).alpha(0.25)
      : props.theme.DARK} !important;

  & :hover {
    border-color: ${props => props.theme.CYAN};
    box-shadow: none;
  }
`;

如何处理样式组件中的条件

How to handle conditionals in a styled component

javascript

reactjs

styled-components