您可以为任何html组件提供样式属性。
您应该传递属性为Camelcased的对象。

<button
  style={{ // double bracket to pass an object
    backgroundColor: yourVariable ? 'red' : undefined // notice css background-color became backgroundColor
  }}
>
  {button.label.toUpperCase()}
</button>

您可以对类执行相同的操作

<button
  className={yourVariable && "yourClass"}
>
  {button.label.toUpperCase()}
</button>

您可以根据条件设定button的样式。

在这个用例中，您已经有了状态button.value，它可以用作为Map的button设置内联样式（或类）的条件。
示例：

const SpecialButton = ({ buttons, setButtons, handleButtonsChange }) => {
  return (
    <div className="button-container">
      {buttons.map((button, index) => (
        <button
          key={`${button.label}-${index}`}

          // 👇 This property is added
          style={{
            backgroundColor: button.value ? "#aaa" : "#eee",
            textDecoration: button.value ? "underline" : "none",
          }}

          onClick={() =>
            handleButtonsChange({ buttons, setButtons })(button.label)
          }
        >
          {button.label.toUpperCase()}
        </button>
      ))}
    </div>
  );
};

在上面的示例中，按钮被设置为在选定时变暗，但您可以进一步自定义样式以获得所需的结果。
More about inline styles
顺便说一句，没有必要通过onClick={() => handleButtonsChange({ buttons, setButtons })(button.label)}将状态值传递给事件。
父组件始终具有这些值，因此您不需要将其向下传递到SpecialButton并将其传递回来。
希望这会有所帮助！
完整示例：

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Subheading } from "GlobalStyles";
import { FrontendProjects } from "./FrontendProjects";
import { GraphicDesignProjects } from "./GraphicDesignProjects";
import "index.css";

export const FeaturedProjects = () => {
  const [buttons, setButtons] = useState([
    { label: "Development", value: true },
    { label: "Graphic design", value: false },
  ]);

  const handleButtonsChange = (label) => {
    const newButtonsState = buttons.map((button) => {
      if (button.label === label) {
        return (button = { label: button.label, value: true });
      }
      return {
        label: button.label,
        value: false,
      };
    });
    setButtons(newButtonsState);
  };

  return (
    <>
      <Subheading>
        <span>Featured projects</span>
      </Subheading>
      <SpecialButton {...{ buttons, handleButtonsChange }} />
      {buttons[0].value && <FrontendProjects />}
      {buttons[1].value && <GraphicDesignProjects />}
    </>
  );
};

const SpecialButton = ({ buttons, handleButtonsChange }) => {
  return (
    <div className="button-container">
      {buttons.map((button, index) => (
        <button
          key={`${button.label}-${index}`}

          // 👇 This property is added
          style={{
            backgroundColor: button.value ? "#aaa" : "#eee",
            textDecoration: button.value ? "underline" : "none",
          }}

          onClick={() =>
            handleButtonsChange(button.label)
          }
        >
          {button.label.toUpperCase()}
        </button>
      ))}
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<FeaturedProjects />, rootElement);