React 中的样式-css教程-PHP中文网

React 中的样式

WBOY

发布： 2024-07-16 17:41:40

原创

694 人浏览过

Styling in React

介绍

样式是 Web 开发的一个重要方面，可确保您的应用程序具有视觉吸引力且用户友好。 React 提供了多种设置组件样式的方法，从传统的 CSS 和 Sass 到现代的 CSS-in-JS 解决方案（例如 Styled-Components）。本周，我们将深入研究这些方法，并学习如何在您的 React 项目中有效地应用它们。

React 中样式的重要性

正确的样式可以增强用户体验，提高可用性，并使您的应用程序更具吸引力。了解不同的样式技术可以让您选择适合您特定项目需求的最佳方法。

传统CSS

在 React 中使用 CSS：

基本示例：

  import React from 'react';
  import './App.css';

  function App() {
      return (
          <div className="container">
              <h1 className="title">Hello, World!</h1>
          </div>
      );
  }

  export default App;

登录后复制

App.css：

  .container {
      text-align: center;
      padding: 20px;
  }

  .title {
      color: blue;
      font-size: 2em;
  }

登录后复制

CSS 模块：

示例：

  import React from 'react';
  import styles from './App.module.css';

  function App() {
      return (
          <div className={styles.container}>
              <h1 className={styles.title}>Hello, World!</h1>
          </div>
      );
  }

  export default App;

登录后复制

App.module.css：

  .container {
      text-align: center;
      padding: 20px;
  }

  .title {
      color: blue;
      font-size: 2em;
  }

登录后复制

使用 Sass

安装 Sass：

安装命令：

  npm install node-sass

登录后复制

在 React 中使用 Sass：

App.scss：

  $primary-color: blue;
  $padding: 20px;

  .container {
      text-align: center;
      padding: $padding;
  }

  .title {
      color: $primary-color;
      font-size: 2em;
  }

登录后复制

应用程序组件：

  import React from 'react';
  import './App.scss';

  function App() {
      return (
          <div className="container">
              <h1 className="title">Hello, World!</h1>
          </div>
      );
  }

  export default App;

登录后复制

使用 Sass 进行嵌套样式：

示例：

  .container {
      text-align: center;
      padding: 20px;

      .title {
          color: blue;
          font-size: 2em;

          &:hover {
              color: darkblue;
          }
      }
  }

登录后复制

样式组件

样式组件简介：

定义：使用标记模板文字来设计 React 组件样式的库。
安装：

  npm install styled-components

登录后复制

使用样式组件：

示例：

  import React from 'react';
  import styled from 'styled-components';

  const Container = styled.div`
      text-align: center;
      padding: 20px;
  `;

  const Title = styled.h1`
      color: blue;
      font-size: 2em;

      &:hover {
          color: darkblue;
      }
  `;

  function App() {
      return (
          <Container>
              <Title>Hello, World!</Title>
          </Container>
      );
  }

  export default App;

登录后复制

使用样式组件进行主题化：

创建主题：

  import { ThemeProvider } from 'styled-components';

  const theme = {
      colors: {
          primary: 'blue',
          secondary: 'darkblue'
      },
      spacing: {
          padding: '20px'
      }
  };

  function App() {
      return (
          <ThemeProvider theme={theme}>
              <Container>
                  <Title>Hello, World!</Title>
              </Container>
          </ThemeProvider>
      );
  }

登录后复制

使用主题值：

  import styled from 'styled-components';

  const Container = styled.div`
      text-align: center;
      padding: ${(props) => props.theme.spacing.padding};
  `;

  const Title = styled.h1`
      color: ${(props) => props.theme.colors.primary};
      font-size: 2em;

      &:hover {
          color: ${(props) => props.theme.colors.secondary};
      }
  `;

登录后复制