如何在ReactJS和服务器端框架中使用DOM应用样式？

Question

我是reactjs新手，我想直接使用DOM或内联样式操作样式。我正在使用

useLayoutEffect

来尽早运行此操作。

import { useLayoutEffect } from 'react'


const App = () => {
  useLayoutEffect(() => {
    document.querySelector('.my-element').style.background = 'red'
  }, [])

  return <div className="my-element">Hello World!</div>
}

export default App

效果与常规样式一样。但是，我做的事情正确吗？或者有没有更好的方法直接使用 DOM 应用样式？

假设我想在服务器端或静态端使用它，在应用真正的样式之前我总是有轻微的 FOUC（无样式状态），例如在 NextJS 中。

想了解如何在服务器端、SSG 中使用 DOM 应用样式，以及最好的方法是什么。

Answer 1

在 React 中，更喜欢使用内联样式、CSS 模块或 JS 中的 CSS（例如用于动态样式的样式化组件）而不是直接 DOM 操作，以避免在 Next.js 等 SSR/SSG 环境中出现 FOUC

const App = () => {
  const [backgroundColor, setBackgroundColor] = useState('red');

  return (
    <div style={{ background: backgroundColor }}>
      Hello World!
    </div>
  );
};

CSS：

.myElement {
  background: red;
}

JSX：

import styles from './App.module.css';

const App = () => (
  <div className={styles.myElement}>Hello World!</div>
);

JSX： 从“样式组件”导入样式；

const StyledDiv = styled.div`
  background: red;
`;
const App = () => (
  <StyledDiv>Hello World!</StyledDiv>
);