如何将 css 转换为以下样式的样式组件答案

【问题标题】：How to convert css to style components for the below style如何将 css 转换为以下样式的样式组件
【发布时间】：2020-10-29 02:57:44
【问题描述】：

我正在尝试将以下样式转换为样式组件。

我的 CSS 代码::

ol.progtrckr {
    display: flex;
    flex-direction: column;
    list-style-type: none;
    width: 100%;
}
ol.progtrckr li.progtrckr-done::before {
    content: "\2713";
    color: white;
    background-color: yellowgreen;
    height: 1.2em;
    border: none;
    border-radius: 1.2em;
}
ol.progtrckr li.progtrckr-todo::before {
    content: "\039F";
    color: silver;
    background-color: white;
    font-size: 1.5em;
    bottom: -1.6em;
}

我的样式化组件代码 ::

    const OLStepper = styled.ol`
    display: flex;
    flex-direction: column;
    list-style-type: none;
    width: 100%;
    `;
    const LIStepperDone = styled.li`
       &:before {
      content: "\2713";
      color: white;
      background-color: yellowgreen;
      height: 1.2em;
      border: none;
      border-radius: 1.2em;}
    
    `;
    
    const LIStepperTodo = styled.li`
          &:before {
      content: "\039F";
      color: silver;
      background-color: white;
      font-size: 1.5em;
      bottom: -1.6em;
    }
    
    `;

我在 react::

<ol className="progtrckr" >
    <li className="progtrckr-done">Order Processing</li>
    <li className="progtrckr-done">Pre-Production</li>
    <li className="progtrckr-done">In Production</li>
    <li className="progtrckr-done">Shipped</li>
    <li className="progtrckr-todo">Delivered</li>
    
</ol>

我有上面的 css 我想将它转换为样式组件。我写的那个不起作用。请帮帮我 - 提前致谢

【问题讨论】：

对不起，我听不懂！
如果可以，请解释问题
我有上面的 css 我想将其转换为样式组件。我写的那个不起作用。请帮助我

标签： html css reactjs

【解决方案1】：

这是一个如何正确使用样式化组件的示例。参考[Styled Components Documentation][1]

import React from 'react'
import styled from 'styled-components'

const StyledCounter = styled.div`
  /* ... */
`
const Paragraph = styled.p`
  /* ... */
`
const Button = styled.button`
  /* ... */
`

export default class Counter extends React.Component {
  state = { count: 0 }

  increment = () => this.setState({ count: this.state.count + 1 })
  decrement = () => this.setState({ count: this.state.count - 1 })

  render() {
    return (
      <StyledCounter>
        <Paragraph>{this.state.count}</Paragraph>
        <Button onClick={this.increment}>+</Button>
        <Button onClick={this.decrement}>-</Button>
      </StyledCounter>
    )
  }
}

基本上为了回答您的问题，您代码中的<ol></ol> 元素变为<OLStepper></OLStepper>。您将为其他样式组件重复此操作。希望这为您指明了正确的方向。

【讨论】：