如何使用 JS 变量更改按钮颜色

Question

我试图实现的是，根据当前的 SDG 设置按钮颜色（将其理解为一章）。所以我想使用变量sdg 设置章节名称，然后我想将css文件中的正确颜色应用于构造函数中的按钮。我已经在标头中使用了类似的方法，其中 ClassName 包含一个变量 sdg 所以选择了正确的 css，但它似乎只在我 return() 之后才有效。

如果您需要更好的解释或有更好的方法，也请写出来。

编辑：请放轻松，我才 16 岁，不太懂 ;)

// eslint-disable-next-line eslint-comments/disable-enable-pair
/* eslint-disable unicorn/filename-case */
import * as React from "react";
import Modal, { ICustomModalStyle } from "@bdenzer/react-modal";
import Logo from "../../../SDGLogos/Goal-06.png";

interface States {
    button1color: string;
    button2color: string;
    shouldShowModal: boolean;
    onlyCloseWithButton: boolean;
}
const sdg = "SDG06";
const buttonsdg = getComputedStyle(app.colour_SDG01);
// eslint-disable-next-line react/prefer-stateless-function
export class Quiz extends React.Component<unknown, States> {
    constructor(props: unknown) {
        super(props);
        this.state = {
            button1color: "rgb(204,204,255)",
            button2color: "blue",
            shouldShowModal: false,
            onlyCloseWithButton: true,
        };
        this.closeModal = this.closeModal.bind(this);
        this.openModal = this.openModal.bind(this);
    }

    handleClick(): void {
        this.setState(({ button1color }) => ({
            button1color: "green",
            button2color: "red",
        }));
    }

    private closeModal(): void {
        this.setState({ shouldShowModal: false });
    }

    private openModal(): void {
        this.setState({ shouldShowModal: true });
    }

    render(): JSX.Element {
        const modalStyle: ICustomModalStyle = {
            animationTime: 400,
            closeButtonText: {
                color: "white",
            },
            hoveredButtonText: {
                fontWeight: "bold",
            },
            modalHeader: {
                backgroundColor: "green",
            },
            modalTitle: {
                color: "white",
            },
        };
        return (
            <div>
              <div className={`colour_${sdg}`}>
                <div className="header">
                    Hochwertige Bildung <img className="sdglogo" alt="logo" src={Logo} />
                </div>
            </div>

                <p className="quizQuestion">Does a passenger car or a plane produce more greenhouse gases?</p>
                <div>
                    <button
                        className="answerButtonleft"
                        style={{ backgroundColor: this.state.button1color }}
                        type="button"
                        onClick={() => {
                            this.handleClick();
                            setTimeout(() => {
                                this.openModal();
                            }, 1000);
                        }}
                    >
                        The passenger car
                    </button>
                    <button
                        className="answerButtonright"
                        style={{ backgroundColor: this.state.button2color }}
                        type="button"
                        onClick={() => {
                            this.handleClick();
                            setTimeout(() => {
                                this.openModal();
                            }, 1000);
                        }}
                    >
                        The plane
                    </button>
                </div>
                <div>
                    <Modal
                        closeModal={this.closeModal}
                        customStyle={modalStyle}
                        shouldShowModal={this.state.shouldShowModal}
                        title="React Modal in TypeScript"
                        onlyCloseWithButton={this.state.onlyCloseWithButton === true}
                    >
                        The plane does. Studies show that a plane produces about 230 grams per Person per kilometer
                        (g/Pkm) while a passenger car only frees about 147 g/Pkm.
                    </Modal>
                </div>
            </div>
        );
    }
}

:root { --SDG01color:  #E5243B; }
:root { --SDG02color:  #DDA63A;}
:root { --SDG03color:  #4C9F38;}
:root { --SDG04color:  #C5192D;}
:root { --SDG05color:  #FF3A21;}
:root { --SDG06color:  #26BDE2;}
:root { --SDG07color:  #FCC30B;}
:root { --SDG08color:  #A21942;}
:root { --SDG09color:  #FD6925;}
:root { --SDG10color: #DD1367;}
:root { --SDG11color: #FD9D24;}
:root { --SDG12color: #BF8B2E;}
:root { --SDG13color: #3F7E44;}
:root { --SDG14color: #0A97D9;}
:root { --SDG15color: #56C02B;}
:root { --SDG16color: #00689D;}
:root { --SDG17color: #19486A ;}

.colour_SDG01{
   background-color:  var(--SDG01color);
}

.colour_SDG02{
    background-color: var(--SDG02color);
}

.colour_SDG03 {
    background-color: var(--SDG03color);
}

.colour_SDG04 {
    background-color: var(--SDG04color);
}

.colour_SDG05 {
    background-color: var(--SDG05color);
}

.colour_SDG06 {
    background-color: var(--SDG06color);
}

.colour_SDG07 {
    background-color: var(--SDG07color);
}

.colour_SDG08 {
    background-color: var(--SDG08color);
}

.colour_SDG09 {
    background-color: var(--SDG09color);
}

.colour_SDG10 {
    background-color: var(--SDG10color);
}

.colour_SDG11 {
    background-color: var(--SDG11color);
}

.colour_SDG12 {
    background-color: var(--SDG12color);
}

.colour_SDG13 {
    background-color: var(--SDG13color);
}

.colour_SDG14{
    background-color: var(--SDG14color);
}

.colour_SDG15 {
    background-color: var(--SDG15color);
}

.colour_SDG16 {
    background-color: var(--SDG16color);
}

.colour_SDG17 {
    background-color: var(--SDG17color);
}

Answer 1

只需将className={`colour_${sdg}`} 属性添加到您的按钮，就像您在标题中所做的那样！例如className={`answerButtonleft colour_${sdg}`}
您可以从元素、计算的样式部分和状态中的按钮颜色中删除 style={{ backgroundColor: ... }} 语句。
我假设 answerButtonleft 和类似的类在另一个 CSS 文件中，或者你只是没有粘贴，或者还没有实现它们。