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

Question

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

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

您在样式div上使用标记的模板文字，这就是您获取道具的方法。然而，在你的方法中，我注意到你从道具中解构出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;
  }
`;

Answer 2

props.theme.CYAN是什么样的？正如你所说，如果你用HEX替换它，它会起作用，这让我相信这个问题可能不是有条件的，而是new Color(props.theme.CYAN).alpha(0.25)。