为什么React不会使用样式组件渲染全局CSS

Question

我在 YouTube 上观看了教程并按照每个步骤进行操作，但我所遵循的内容与视频中发生的情况不符。这是因为版本不同还是其他什么原因？这是代码文件

这是我的 GlobalStyle.js

import {createGlobalStyle} from 'styled-components'

const GlobalStyle = createGlobalStyle`
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        list-style: none;
    }

    :root{
        --primary-color: #222260;
        --primary-color2: 'color: rgba(34, 34, 96, .6)';
        --primary-color3: 'color: rgba(34, 34, 96, .4)';
        --color-green: #42AD00;
        --color-grey: #aaa;
        --color-accent: #F56692;
        --color-delete: #FF0000;
    }

    body{
        background-color: #FF0000;
        font-family: 'Nunito', sans-serif;
        font-size: clamp(1rem, 1.5vw, 1.2rem);
        overflow: hidden;
        color: rgba(34, 34, 96, .6);
    }

    h1, h2, h3, h4, h5, h6{
        color: var(--primary-color);
    }

    .error{
        color: red;
        animation: shake 0.5s ease-in-out;
        @keyframes shake {
            0%{
                transform: translateX(0);
            }
            25%{
                transform: translateX(10px);
            }
            50%{
                transform: translateX(-10px);
            }
            75%{
                transform: translateX(10px);
            }
            100%{
                transform: translateX(0);
            }
        }
    }
`;

export default GlobalStyle;

这是我的index.js

import React, { Fragment } from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
import { GlobalStyle } from './styles/GlobalStyle.js';

ReactDOM.render(
    <GlobalStyle />,
    <App />,
  document.getElementById('root')
);

这是我的App.js

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div className='App'>
        test
      </div>
    );
  }
}

export default App;

如果应用程序成功渲染，我想渲染红色完整背景 。 。 抱歉，如果我的英语这么差xixixi

Answer 1

看来你的代码是错误的。

在index.js中，应该像下面这样

ReactDOM.render(
<React.Fragment>
  <GlobalStyle />
  <App />
</React.Fragment>,
document.getElementById('root')
);