Javascript Reactjs中的样式化组件

如何在app.js中将css代码作为样式化组件应用？ 如何将这个“.container>div”转换为样式化组件并在我的app.js中使用。在通过npm安装样式化组件后，安装并导入它。我被困在这里了。我无法在样式化组件中应用一些css样式

App.js

 import React, { Component } from 'react';
 import './App.css';

 class App extends Component{
  render(){
    return (

      <div class="container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      </div>
           );
         }
       }

 export default App;

---

基于充当容器的

div

创建一个组件，并写下您的CSS。这里的技巧是将appropiate样式应用于组件

容器的子
div
，您需要在模板文本中使用
&
（表示父选择器）来创建所需的嵌套，以便SC可以生成appropiate CSS类

import React, { Component } from 'react';
import styled from 'styled-components';
import './App.css';

const Container = styled.div`
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: 50px 50px;

  & > div {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    color: #ffeead;
  }

  & > div:nth-child(1n) {
    background-color: #96ceb4;    
  }

  & > div:nth-child(3n) {
    background-color: #88d8b0;
  }

  & > div:nth-child(2n) {
    background-color: #ff6f69;
  }

  & > div:nth-child(4n) {
    background-color: #ffcc5c;
  }
`;


class App extends Component{
  render(){
    return (
      <Container>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
      </Container>
    );
  }
}

export default App;

import React，{Component}来自'React'；
从“样式化组件”导入样式化；
导入“/App.css”；
const Container=styled.div`
显示：网格；
网格模板列：自动；
网格模板行：50px 50px；
&>部门{
显示器：flex；
证明内容：中心；
对齐项目：居中；
字号：2em；
颜色：#ffeead；
}
&>分区：第n个子（1n）{
背景色：#96ceb4；
}
&>分区：第n个孩子（3n）{
背景色：#88d8b0；
}
&>分区：第n个子（2n）{
背景色：#ff6f69；
}
&>分区：第n个孩子（4n）{
背景色：#ffcc5c；
}
`;
类应用程序扩展组件{
render（）{
返回(
1.
2.
3.
4.
5.
6.
);
}
}
导出默认应用程序；

import React, { Component } from 'react';
import styled from 'styled-components';
import './App.css';

const Container = styled.div`
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: 50px 50px;

  & > div {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    color: #ffeead;
  }

  & > div:nth-child(1n) {
    background-color: #96ceb4;    
  }

  & > div:nth-child(3n) {
    background-color: #88d8b0;
  }

  & > div:nth-child(2n) {
    background-color: #ff6f69;
  }

  & > div:nth-child(4n) {
    background-color: #ffcc5c;
  }
`;


class App extends Component{
  render(){
    return (
      <Container>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
      </Container>
    );
  }
}

export default App;