如果你在做样式组件，你如何在 React 中重置 CSS？

Question

所以我正在创建一个带有样式组件的页脚，我们不像在普通 css 中那样使用类。

如果我想在下面的代码中复制相同的 CSS 技巧

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
   }

我将如何在样式组件中复制它？这甚至是正确的方法吗？

或者我是否需要创建一个 App.css 文件并将其添加到我的项目中？

这是 react 中样式组件的典型代码

 import styled from 'styled-components/macro';

 export const Container = styled.div`
 padding: 80px 60px;
 background: black;
 font-family: 'Nunito Sans', sans-serif;

@media (max-width: 1000px) {
  padding: 70px 30px;
}
`;

是否可以将 * { box-sizing} 代码添加到我的样式组件中，或者在我的项目中实现它的正确方法是什么？

Answer 1

import { createGlobalStyle } from 'styled-components'

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

// in your app root
<React.Fragment>
  <GlobalStyle />
  <Navigation /> {/* example of other top-level stuff */}
</React.Fragment>