样式组件在重新加载后丢失样式

我首先渲染模板服务器端，并且在初始加载时一切似乎都工作正常。然而，在开发中，一旦我更改样式组件的样式并重新加载，该组件就会丢失所有样式。奇怪的是，如果我将其更改回原始样式，样式将返回并将它们附加到元素中。有谁知道为什么会发生这种情况？

Webpack.config.js

const path = require('path');
module.exports = {
  entry: path.join(__dirname, 'client/index.js'),
  output: {
    path: path.join(__dirname, 'client-build'),
    filename: 'client.bundle.js',
    publicPath: path.join('testapp', 'static'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [path.resolve(__dirname, 'client')],
        exclude: /node_modules/,
        options: {
          babelrc: true,
        },
      },
      {
        test: /\.pcss$/,
        use: [
          {
            loader: 'style-loader',
            options: {hmr: true},
          },
        ],
      },
      {
        test: /\.(html)$/,
        loader: 'html-loader',
      },
    ],
  },
};

Run Code Online (Sandbox Code Playgroud)

package.json 脚本用于在使用 webpack 时监视客户端 src

"dev:client": "webpack --watch --mode=development --progress",

Run Code Online (Sandbox Code Playgroud)

服务器.js

...

app.use(async (ctx) => {
  ctx.type = 'text/html';
  ctx.body = `<!DOCTYPE html><html><head></head><body><div id='root'>
  ${renderToString(<App><div>This is render from the server-side template</div></App>)}
  </div></body><script src="/testapp/static/client.bundle.js"></script></html>`;
});
app.listen(port);

Run Code Online (Sandbox Code Playgroud)

客户端/index.js

import React from 'react';
import {hydrate} from 'react-dom';

import {App} from './components';

hydrate(
  <App>
    <div>This is render from the client-side</div>
  </App>,
  document.getElementById('root')
);

Run Code Online (Sandbox Code Playgroud)

例如样式组件>应用程序组件

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const PropTypes = {
  children: PropTypes.element.isRequired,
};

const App = ({children}) => (
  <Container>
    {children}
  </Container>
);

App.propTypes = PropTypes;
export default App;

const Container = styled.div`
  display: flex;
  height: 90%;
  background: yellow;
`;

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，9 月前
查看次数：	1402 次
最近记录：	7 年，9 月前