有没有一种方法可以在不使用 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>

有没有一种方法可以在不使用 className 的情况下使用 ID 在 React 中设置元素样式？

Is there a way to style an element in React using the ID without using className?

css

lamp

reactjs