设置Reactstrap单选按钮的样式

Question

我试图在使用Reactstrap库创建的React中为动态创建的单选按钮设置样式。我查看了其他信息，发现通常在样式单选按钮时会隐藏它们，创建新样式并将按钮链接到新样式。但是，我不确定在这种情况下如何执行此操作，因为我的按钮已映射到我从drupal中提取的数据。无论如何，在此先感谢您的帮助。

这是引导程序库的链接。 https://reactstrap.github.io/components/form/

这是我的页面代码：

import React, { Component} from 'react';
import '../../css/Home.css';
import MenuBar from "../sub-components/MenuBar";
import LeftMenuBar from "../sub-components/LeftMenuBar";
import "../../css/ProductPage.css"
import WomensWear from "../../media/WomensWear.jpg"
import {addToCart} from "../../actions/addToCart";
import {
    FormGroup,
    Input,
    Label
} from "reactstrap";

class ProductPage extends Component {
    constructor(props) {
        super(props);

        this.state = {
            selectedVariation: null
        }
    }

    cartAdd = (e) => {
        this.props.dispatch(addToCart({
            purchased_entity_id: this.state.selectedVariation,
            purchased_entity_type: 'clothing',
            quantity: 1
        }));
        console.log("clicked");
    };



    getProduct() {

        console.log(this.state);

        let product = null;
        if (this.props.products && this.props.products.items.length) {
            product = this.props.products.items.find(o => o.path[0].alias === this.props.router.match.url);
            if (product && this.props.variations.items.length && this.props.attributes.items.length) {
                product.something = []; product.sizes = []; product.colors = [];
                for (let i = 0; i < product.variations.length; i++) {
                    let varid = product.variations[i].target_id;
                    let variation = this.props.variations.items.find(o => o.variation_id[0].value === varid);
                    variation.size = this.props.attributes.items.find(o => o.attribute_value_id[0].value === variation.attribute_size[0].target_id);
                    variation.color = this.props.attributes.items.find(o => o.attribute_value_id[0].value === variation.attribute_color[0].target_id);

                    let sizeID = product.sizes.find(o => o.value === variation.size.attribute_value_id[0].value);

                    if (!sizeID) {
                        product.sizes.push({value: variation.size.attribute_value_id[0].value, name: variation.size.name[0].value});
                    }

                    let color = product.colors.find(o => o.value === variation.color.attribute_value_id[0].value);

                    if (!color) {
                        product.colors.push({value: variation.color.attribute_value_id[0].value, name: variation.color.name[0].value});
                    }

                    product.something.push(variation);
                    // product.price.push({value: variation.price.attribue_value[0].value, name: variation.price.name[0].value});
                }
            }
            console.log(product);
        }
        return product;
    }

    updateSize = (e,product) => {

            this.setState({selectedSize: e.target.value});
    };

    // updateColor = (e,product) => {
    //
    //     let color = product.something.find(o => o.attribute_size[0].target_id === parseInt(e.target.value));
    //
    //     console.log(color);
    //
    //     this.setState({selectedSize: size.variation_id[0].value});
    // };

    render() {
        let style = {
            height: this.props.height - 56,
        };

        let product = this.getProduct();

        // if (product && product.something.length) {
        // let variation = this.state.selectedVariation ? this.state.selectedVariation : product.something[0];
        // console.log(variation);
        // }

        let body = product && product.body.length ? product.body[0].value : null;

        return (
            <div className="App" id="default">
                <div className='MenuBar'>
                    <MenuBar/>
                </div>
                <div>
                    <div style={style} className="ProductPage row no-gutters">
                        <div className="col-xs-3 col-md-3">
                            <LeftMenuBar/>
                        </div>
                        <div className="outer col-xs-4 col-md-4">
                            <div>
                                <div id="ProductPlacement">
                                  <img src={WomensWear} alt=""/>
                                    <div id="alternate-pics">
                                        <div id="alt-pic">
                                        </div>
                                        <div id="alt-pic">
                                        </div>
                                        <div id="alt-pic">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="col-xs-5 col-md-5">
                            <div id="ImagePlacement">
                                <div className="ProductTitle">
                                    <h1>First Product</h1>
                                </div>
                                <hr/>
                                <div className="ProductDescription">
                                    <div dangerouslySetInnerHTML={{__html: body}} />
                                </div>
                                <div id="options">
                                        <FormGroup>
                                            <Input type="select" name="select" id="override" onChange = {(e) => this.updateSize(e,product)}>
                                                {product && product.sizes && product.sizes.map (size => (
                                                    <option value={size.value}>{size.name}</option>
                                                ))}
                                            </Input>
                                        </FormGroup>
                                        <FormGroup tag="fieldset">
                                            <FormGroup check onChange = {(e) => this.colorSelect(e,product)}>
                                                {product && product.sizes && product.colors.map (color => (
                                                <Label check htmlFor="radio1">
                                                    <Input type="radio" name="radio1" />{' '}
                                                </Label>
                                                ))}
                                            </FormGroup>
                                        </FormGroup>
                                    <div className="AddToCart">
                                        <button onClick = {(e) => this.cartAdd()} className="AddToCart">Add To Cart</button>
                                        {/*<button className="Price">value={variation.price}</button>*/}
                                    </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        );
    }
}

export default ProductPage;