CSS-in-JS：React 应用程序的现代样式-js教程-PHP中文网

CSS-in-JS：React 应用程序的现代样式

花韻仙語

发布： 2024-12-19 22:09:01

原创

1171人浏览过

css-in-js：react 应用程序的现代样式

React 中的 CSS-in-JS

CSS-in-JS 是一种将 CSS 样式嵌入 JavaScript 代码的技术。它让开发者用 JavaScript 语法编写 CSS 规则，为 React 应用提供更灵活、更模块化的样式管理方式。这种方法在组件化架构盛行的今天尤其受欢迎，因为它能确保样式仅作用于特定组件，避免全局样式冲突。

在 React 中，CSS-in-JS 将样式与组件紧密绑定，提升样式的可维护性和可扩展性。目前流行的 CSS-in-JS 库包括 styled-components、emotion 和 jss。

CSS-in-JS 的主要优势

作用域样式: CSS-in-JS 保证样式仅作用于单个组件，避免全局 CSS 冲突，提升应用的可维护性。
动态样式: 轻松利用 JavaScript 变量、props 和状态根据组件逻辑动态调整样式，例如根据按钮状态改变按钮颜色。
组件化样式: 样式与组件逻辑同处一处，方便管理，尤其在大型应用中更显优势，有利于构建模块化、易维护的代码库。
自动厂商前缀: 许多 CSS-in-JS 库（如 styled-components 和 emotion）自动添加厂商前缀，确保跨浏览器兼容性。
主题支持: CSS-in-JS 简化了全局主题的创建。开发者可在顶层定义配色方案、排版等共享样式，并动态应用到组件中。

主流 CSS-in-JS 库

1. styled-components

styled-components 是最流行的 CSS-in-JS 库之一。它允许在 JavaScript 文件中编写 CSS 代码，但样式作用域限制在各个组件内。

示例：使用 styled-components

<code class="bash">npm install styled-components</code>

登录后复制

<code class="javascript">import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  background-color: ${(props) => (props.primary ? 'blue' : 'gray')};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    opacity: 0.8;
  }
`;

const App = () => {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
};

export default App;</code>

登录后复制

说明：

styled.button 函数创建样式化的按钮组件。
样式仅作用于该按钮组件，不会影响其他按钮。
primary prop 动态控制按钮背景颜色。

2. emotion

emotion 也是一个流行的 CSS-in-JS 库，提供强大的样式解决方案。它与 styled-components 类似，并额外提供性能优化和对服务器端渲染的更好支持。

立即学习“前端免费学习笔记（深入）”；

SmartYoga瑜伽馆预约小程序

随着国民健身意识越来越强，各式各样的健身模式不断出现。瑜伽也受到了大众的喜爱，瑜伽行业发展越来越快,作为馆主，你还在微信群里让你的会员使用接龙的方式进行约课吗？你还在用传统的Excel进行排课吗？如果有一款小程序会员点一下就能约课，会不会让你惊喜、意外、激动——没错，瑜伽预约小程序就是为了解决馆主会员约课的痛点应运而生。功能包括瑜伽馆动态，瑜伽常识，瑜伽老师预约，瑜伽课程预约等模块。

查看详情

示例：使用 emotion

<code class="bash">npm install @emotion/react @emotion/styled</code>

登录后复制

<code class="javascript">/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import styled from '@emotion/styled';

const buttonStyles = (primary) => css`
  background-color: ${primary ? 'blue' : 'gray'};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    opacity: 0.8;
  }
`;

const Button = styled.button`
  ${(props) => buttonStyles(props.primary)}
`;

const App = () => {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
};

export default App;</code>

登录后复制

说明：

css 函数创建样式定义，通过 styled API 应用于组件。
emotion 支持模板字面量和 JavaScript 对象编写样式。

3. jss (JavaScript Style Sheets)

jss 另一个 CSS-in-JS 库，允许用 JavaScript 编写 CSS。它提供对样式更精细的控制，支持自定义主题和更高级的样式逻辑。

示例：使用 jss

<code class="bash">npm install jss react-jss</code>

登录后复制

<code class="javascript">import React from 'react';
import { createUseStyles } from 'react-jss';

const useStyles = createUseStyles({
  button: {
    backgroundColor: (props) => (props.primary ? 'blue' : 'gray'),
    color: 'white',
    padding: '10px 20px',
    border: 'none',
    borderRadius: '5px',
    cursor: 'pointer',
    '&:hover': {
      opacity: 0.8,
    },
  },
});

const Button = (props) => {
  const classes = useStyles(props);
  return <button className={classes.button}>{props.children}</button>;
};

const App = () => {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
};

export default App;</code>

登录后复制

说明：

createUseStyles 钩子生成样式。
useStyles 钩子接收 props 并返回按钮的类名。
支持基于 props 的动态样式。

CSS-in-JS 的挑战

CSS-in-JS 虽然有很多优点，但也存在一些挑战：

性能开销: 尤其在大型应用中，大量动态样式可能会带来性能开销。
捆绑包大小: 样式与 JavaScript 代码捆绑，可能增加 JavaScript 包大小。
学习曲线: 对于习惯传统 CSS 或预处理器 (如 Sass) 的开发者，需要一定的学习成本。
关注点分离: 一些开发者认为将样式和逻辑混合在一个文件中违反了关注点分离原则。

CSS-in-JS 的最佳实践

使用主题: 利用 CSS-in-JS 库的主题功能管理全局样式 (例如颜色、字体)。
保持样式作用域: 使用 styled-components 或 jss 保持样式作用域，避免全局样式冲突。
限制动态样式: 谨慎使用动态样式，避免过度使用影响性能。
使用合适的工具: 使用 Babel 等工具优化 CSS-in-JS 库的性能，例如压缩生成的 CSS。

结论

CSS-in-JS 是设计 React 应用的现代方法，它结合了 JavaScript 和 CSS 的优势。通过 styled-components、emotion 或 jss 等库，开发者可在 JavaScript 文件中编写样式，提升代码库的模块化、性能和可维护性。但在大型应用中，需要权衡 CSS-in-JS 的使用和潜在的性能影响。

以上就是CSS-in-JS：React 应用程序的现代样式的详细内容，更多请关注php中文网其它相关文章！