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

Posted 2023-03-15

【中文标题】如何处理样式组件中的条件

【英文标题】：How to handle conditionals in a styled component

【发布时间】：2019-08-29 21:35:08

【问题描述】：

我正在使用样式化组件和 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',
;

我知道这些键并不能准确地描述十六进制值 :) 我会讲到的

【问题讨论】：

可以分享一下 ThemeProvider 的代码吗？

我添加了 ThemeProvider

对不起，我的意思是你能分享实际的主题对象，例如 CLASSIC_THEME 也指的是什么。你确定它有一个名为 CYAN 的属性吗？

好的，更新帖子

【参考方案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;
  
`;

【讨论】：

成功了！非常感谢

【参考方案2】：

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

【讨论】：

这个模式适用于我使用它的任何其他地方，只要它不是这样的条件的一部分。这是我登录时得到的 ``` ƒ (props) return props.theme.CYAN; ```

你能确认`new Color`是一个外部库吗？ （这可能只是我在 JS 中不熟悉的东西）。话虽如此，props.theme.CYAN 的值可能与该库不兼容。您可以控制台记录该值吗？让我们知道它是什么？ :1px solid $props =>console.log('color', props.theme.CYAN) || new Color(props.theme.CYAN).alpha(0.25);

问题可能是您传递给它的对象，正如上面的 etarhan 所说。 props.theme.CYAN 可能不是有效的颜色值。您可以注销props.theme 以便我们知道我们正在处理的数据吗？

你能用 console.log 100% 确认它吗？这可能很愚蠢，但在这种情况下消除任何疑问将导致答案。

用1px solid $props => console.log('props.theme.CYAN', props.theme.CYAN) || new Color(props.theme.CYAN).alpha(0.25)替换1px solid $props => new Color(props.theme.CYAN).alpha(0.25)