有没有办法在不使用 className 的情况下使用 ID 在 React 中设置元素的样式？

Question

我正在将一个旧网站转换为 React，并且不想更改之前编码的所有 CSS 文件。许多元素当前通过使用 id 设置其样式。有没有办法让className={styles["#topBar"]} 正确设置样式，而无需删除# 并将其替换为CSS 文件夹中的.？

Answer 1

由于您使用的是 CSS 模块，因此您需要稍微不同地访问样式。您需要import styles from 'Component.module.css';，然后通过引用此导入的对象styles.MyClass 或在您的情况下声明您的样式，因为您有连字符，您需要使用括号表示法styles["top-bar"]

这是一个有效的sandbox

//MyComponent.js

import styles from "./MyComponent.module.css";

export default function MyComponent() {
  return (
    <div id={styles["top-bar"]}>
      <h2>My Component</h2>
      <InnerComponent id="inner" />
    </div>
  );
}

function InnerComponent({ id }) {
  return (
    <div id={styles[id]}>
      <h3>Inner Component</h3>
      <p id={styles.para}>Styled Paragraph</p>
    </div>
  );
}

//MyComponent.module.css

#top-bar {
  width: 90vw;
  margin: 1rem auto;
  padding: 1rem;
  text-align: center;
  background-color: LightPink;
}

#inner {
  background-color: LightBlue;
  text-align: left;
}

#para {
  color: red;
}

---

这是一个快速的 sn-p，显示它使用 ID。

function MyComponent() {
  return (
    <div id="top-bar">
      <h2>My Component</h2>
      <InnerComponent id="inner" />
    </div>
  )
}

function InnerComponent({id}) {
  return (
    <div id={id}>
      <h3>Inner Component</h3>
    </div>
  )
}

ReactDOM.render(<MyComponent />, document.getElementById('App'));

#top-bar {
  width: 90vw;
  margin: 1rem auto;
  padding: 1rem;
  text-align:center;
  background-color: LightPink;
}

#inner {
  background-color: LightBlue;
  text-align: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


<div id="App"></div>