React css 以 ant 组件为条件的格式化

Question

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

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

 <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"}
/>

类名确实传递给了组件，但 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

Answer 1

试试这个：

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

Answer 2

在您的案例中，正确的方法应该是这样的：

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

styles 实际上是一个具有字符串属性的对象，因此 {styles.toggle_show} 不是有效的语法，这就是您收到错误的原因。

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

访问它

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

React css 以 ant 组件为条件的格式化

React css formatting conditional on ant component

css

reactjs

ant-design-pro