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

props.theme.CYAN是什么样子？如您所说，如果将其替换为十六进制，它将起作用，这使我相信问题可能不是有条件的，而是new Color(props.theme.CYAN).alpha(0.25)。

Answer 2

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

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

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

2 个答案: