小编Fac*_*eri的帖子

我正在尝试将宽度动态传递给组件的样式。在第一次加载时，没关系，但是如果我调整大小，它永远不会重新呈现组件，即使钩子正在工作。

我读到了，因为 NextJs 是服务器端渲染，这可能会导致这个客户端的问题。所以这是代码：

钩

const useWidth = () => {
  if (process.browser) {
    const [width, setWidth] = useState(window.innerWidth);
    const handleResize = () => setWidth(window.innerWidth);
    useEffect(() => {
      window.addEventListener('resize', handleResize);
      return () => window.removeEventListener('resize', handleResize);
    }, [width]);
    return width;
  }
  return 0;
};

组件（减少只是为了显示示例）

const Login = () => {
  const windowWidth = useWidth();
  const width = windowWidth > CELLPHONE_WIDTH ? '36.6rem' : '90%';
  const loginStyles = styles(width);
  return (
    <div className='container'>
      <TextInput
        type='text'
        width={width}
        placeholder='Email'
      />
    </div>
  ); …