以 ant 组件为条件的反应 css 格式答案

【问题标题】：React css formatting conditional on ant component以 ant 组件为条件的反应 css 格式
【发布时间】：2020-12-10 05:04:59
【问题描述】：

我正在尝试将样式属性发送到组件，但不确定有什么区别..

为什么此语句有效并应用格式

 <Toggle
className={styles.toggle_show}  // class name gets passed as Map_toggle_show__17ukO and applied 
/>

但是这个语句会抛出错误

 <Toggle
className={isShow ? {styles.toggle_show} : {styles.toggle_hide}}
/>

如果我将第二条语句更新为

 <Toggle
className={isShow ? "styles.toggle_show" : "styles.toggle_hide"}
/>

classNames 确实被传递给组件，但 css 没有被应用。

还有为什么这个消息会出现在 const 声明中

import styles from "./Map.module.scss";

const [ToggleVisibilyClass, setToggleVisibilyClass] = React.useState(
    {styles.toggle_show}
  );

(property) styles: {
    readonly [key: string]: string;
}
Parsing error: ',' expected.eslint

【问题讨论】：

标签： css reactjs ant-design-pro

【解决方案1】：

试试这个：

className={isShow ? styles.toggle_show : styles.toggle_hide}

【讨论】：

【解决方案2】：

在您的情况下，正确的方法如下所示：

<Toggle
  className={isShow ? styles.toggle_show : styles.toggle_hide}
/>

styles 实际上是一个带有字符串属性的对象，所以{styles.toggle_show} 是无效的语法，这就是你得到错误的原因。

这个"styles.toggle_show" 工作正常，因为它是一个字符串，但它不是正确的字符串。在幕后，Webpack 会为您的类生成一个不同的名称，通常是一个唯一的名称，您可以使用 styles.toggle_show 访问它。

此外，如果您有一些更复杂的场景，请尝试使用 classnames 包，它可以让事情变得更简单，并且它有很多示例。

【讨论】：

非常感谢 Chavdar，帮助了很多人。这就是我收到此错误（属性）样式的原因：{ readonly [key: string]: string;解析错误：',' expected.eslint
实际上 {styles.toggle_show} 正在工作和申请。也是。
对不起，我不清楚，我指的是{styles.toggle_show} 里面的{isShow ? {styles.toggle_show} : {styles.toggle_hide}}