我是React.JS的新手。我需要做一个有两个开关按钮的订单，然后样式。我不能给它们做造型。
我被告知要用这种方法创建按钮

{props.options.map((option)=> (
    <div>{option.text}</div>
 ))}

<Header />
<Switch options={[
 {
   text: 'Buy',
   value: 'buy'
 },
 {
   text: 'Sell',
   value: 'sell'
 }
]} />
<Form />
<Profit />
<Button text="Submit" />

下面是按钮最终的外观Buy and Sell Buttons in the end
我找不到一种方法来分别设计它们。我也尝试过条件类。
我将订单表单分解为几个组件，并将它们放在app.js文件中。开关按钮位于buy-sell-buttons.js文件中。
下面是buy-sell-buttons.js文件中的代码

import React from "react";
import './buy-sell-buttons.css';

function BuySellButtons (props) {
    
        const SwitchButtons = props.options.map((option, i) => (
          <div key={i}
            // className={`${option.id === option ? "active" : "inactive"}`}
            >
            {option.text}
          </div>
        ));
        return SwitchButtons;
    
}

export default BuySellButtons;

这是我在app.js文件中的代码

const App = () => {
    return (
        <div className='binance-box'>
            <div className="all">
                 <AppHeader />
                 <BuySellButtons options = {[
                     {
                        text: 'Buy',
                        value: 'buy',
                        id: 'buy',
                     },
                     {
                        text: 'Sell',
                        value: 'sell',
                        id: 'sell'
                     }
                ]} />
                <Form />
                <Profit />
                <Button />
           </div>
      </div>
    );
};

这段代码不会抛出任何错误或警告。为了样式化它，我尝试了条件类。

function BuySellButtons (props) {
    
        const SwitchButtons = props.options.map((option, i) => (
        <div key={i}
            className={`${option.id === option ? "active" : "inactive"}`}
            >
            {option.text}
        </div>
        ));
        return SwitchButtons;
    
}

这是我的CSS代码

button {
    font-family: 'Open Sans', sans-serif;
}

.option {
    margin: 0 1rem;
    align-items: center;
    padding-bottom: 10px;
    display: flex;

}

.btn {
    width: 10%;
    padding: 5px;
    text-align: center;
    border: none;
    display: flex;

}

.active {
    color: white;
    background-color: #68AD5C;
    box-sizing: border-box;
    margin: 0px;
    min-width: 0px;
    display: flex;
    width: 169px;
    -webkit-box-align: center;
    align-items: center;
    font-weight: bold;
    font-size: 20px;
    -webkit-box-pack: center;
    justify-content: center;
    cursor: pointer;
    height: 53px;
}

.active:hover {
    background-color: #45a049;   
}

.inactive {
    background-color: #2B283B;
    color: #63222b;
    box-sizing: border-box;
    margin: 0px;
    min-width: 0px;
    display: flex;
    width: 169px;
    -webkit-box-align: center;
    align-items: center;
    font-weight: bold;
    font-size: 20px;
    -webkit-box-pack: center;
    justify-content: center;
    cursor: pointer;
    height: 53px;
}

.inactive:hover {
    background-color: #383642;
    color: #7b343d;
}

这些项不显示为Flex项，并且它们只采用一种样式（它们没有应有的不同）。
我以前只在HTML和CSS中这样做过，而且效果很好。这是HTML文件

<div class="buy-sell">
     <div data-type="buy" class="box" id="buy">Buy</div>
     <div data-type="sell" class="box" id="sell">Sell</div>
</div>

我的CSS文件实际上是一样的。

.box {
    width: 10%;
    padding: 5px;
    display: inline-block;
    text-align: center;
}

.buy-sell {
    margin: 0 1rem;
    display: flex;
    align-items: center;
    flex: 1;
}

#buy {
    color: white;
    background-color: #68AD5C;
    box-sizing: border-box;
    margin: 0px;
    min-width: 0px;
    display: flex;
    width: 169px;
    -webkit-box-align: center;
    align-items: center;
    font-weight: bold;
    font-size: 20px;
    -webkit-box-pack: center;
    justify-content: center;
    cursor: pointer;
    height: 53px;
}

#sell {
    background-color: #2B283B;
    color: #63222b;
    box-sizing: border-box;
    margin: 0px;
    min-width: 0px;
    display: flex;
    width: 169px;
    -webkit-box-align: center;
    align-items: center;
    font-weight: bold;
    font-size: 20px;
    -webkit-box-pack: center;
    justify-content: center;
    cursor: pointer;
    height: 53px;
}

我完全不知道自己在做什么。我尝试了一些不同的方法，比如给它们相同的样式，然后试图以某种方式改变带有文本=Buy的样式，但没有任何效果。另外，我不知道我是否必须使用Flexbox（我在CSS中这样做了）;我试过了，也不管用。