13、React 应用的样式设计全解析

React 应用的样式设计全解析

在 React 应用开发中，样式设计是至关重要的一环，它不仅影响着应用的美观程度，还关系到代码的可维护性和扩展性。本文将详细介绍多种 React 样式设计方法，包括 CSS-in-JS、Styled Components、CSS、SCSS 和 CSS 模块，并提供具体的操作步骤和代码示例。

1. CSS-in-JS

CSS-in-JS 是一种将 CSS 样式直接嵌入到 JavaScript 代码中的方法。以下是一个简单的示例，展示了如何在 React 中使用 CSS-in-JS：

const toggleButtonStyles = {
    float: "left",
    marginTop: "5px",
    marginLeft: "3px",
    alignItems: "center",
    paddingTop: "7px",
    paddingRight: "14px",
    borderRadius: 8,
    border: "none",
    color: "#fff",
    backgroundColor: "green",
    cursor: "pointer",
};

<button
    style={toggleButtonStyles}
    onClick={() => setIsChooseFoodPage(!isChooseFoodPage)}
>
    {isChooseFoodPage ? "Availability Check" : "Order Food"}
&l