css - 有没有办法在不使用 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;
}

这是一个快速片段，显示它与 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>