样式化组件未在 Chrome 中显示

Posted 2023-03-15

【中文标题】样式化组件未在 Chrome 中显示

【英文标题】：Styled Components not displaying in Chrome

【发布时间】：2020-12-23 16:22:15

【问题描述】：

我创建了一个使用 typescript、webpack 和 babel 的 react 应用程序。我决定将 styled-components 用于样式化。使用我的 GlobalStyles 组件时，应用程序不会显示在 chrome 浏览器中，但是当我删除 GlobalStyles 时，应用程序会显示。我在 Chrome 中检查了我的应用程序，可以看到 GlobalStyles 的样式正在应用，但该应用程序再次没有显示。控制台日志中没有错误信息，终端状态编译成功。

有没有人遇到过这个问题并有可能的解决方案？

webpack.config.js

const path = require('path')
require("babel-polyfill")
const rules = [
    
        test: /\.tsx?$/,
        exclude: /node_modules/,
        loader: ['babel-loader','awesome-typescript-loader']
    ,
    
        test: /\.(png|gif|svg)$/,
        loader: ['file-loader', 'url-loader']
    ,
    
        test: /\.css$/,
        loader: ['style-loader', 'css-loader']
    
]

module.exports = 
    target: 'web',
    mode: 'development',
    entry: ['babel-polyfill', './src/index.tsx'],
    output: 
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    ,
    module:  rules ,
    resolve: 
        extensions: ['.ts', '.tsx', '.js']
    ,
    devServer: 
        contentBase: './public',
        port: 5000
    

.babelrc

  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
  "plugins": ["babel-plugin-styled-components","transform-regenerator"]

globalStyles.js

import  createGlobalStyle  from "styled-components";

export const GlobalStyles = createGlobalStyle`
    html 
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
    
    *, *:before, *:after 
        -webkit-box-sizing: inherit;
        box-sizing: inherit;
    

    body 
        margin: 0;
        padding: 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
         'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
    
`;

index.tsx

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import  GlobalStyles  from "../styles/globalStyles.js";

import  StoreProvider  from "./Store";

const root = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <StoreProvider>
      <GlobalStyles>
        <App />
      </GlobalStyles>
    </StoreProvider>
  </React.StrictMode>,
  root
);

【参考方案1】：

你的全局样式这样放，也就是不要在里面放任何组件

const root = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <StoreProvider>
      <GlobalStyles />
      <App />
    </StoreProvider>
  </React.StrictMode>
  root
);

【参考方案2】：

看看这个取自库文档的例子 https://styled-components.com/docs/api

import  createGlobalStyle  from 'styled-components'

const GlobalStyle = createGlobalStyle`
  body 
    color: $props => (props.whiteColor ? 'white' : 'black');
  
`

// later in your app

<React.Fragment>
  <GlobalStyle whiteColor />
  <Navigation /> /* example of other top-level stuff */
</React.Fragment>