React中使用内联CSS：如何为多个li元素设置样式

嘿，我看到你现在正在用React内联样式给<ul>设置样式，想给<li>也加上样式对吧？这里有几种实用的方法可以帮到你，顺便也聊聊内联样式的优缺点和替代方案：

方法1：给每个li单独指定内联样式 #

首先你可以扩展现有的styles对象，把li的样式也定义进去，然后直接在每个li标签上引用：

import React from 'react';

const Menu = () => (
  <ul style={styles.ul}>
    <li style={styles.li}>A</li>
    <li style={styles.li}>B</li>
    <li style={styles.li}>C</li>
    <li style={styles.li}>D</li>
  </ul>
)

const styles = {
  ul: {
    listStyle: 'none',
    padding: 0 // 可选，去掉默认内边距更美观
  },
  li: {
    padding: '8px 12px',
    borderBottom: '1px solid #eee',
    cursor: 'pointer'
  }
}

export default Menu;

这种方法简单直接，适合样式不太复杂的场景。

方法2：用循环渲染li，减少重复代码 #

如果你的菜单项比较多，不想重复写<li>标签，可以把菜单项放进数组，用map循环渲染，同时统一应用li的样式：

import React from 'react';

const Menu = () => {
  // 把菜单项存到数组里，方便维护
  const menuItems = ['A', 'B', 'C', 'D'];
  
  const styles = {
    ul: {
      listStyle: 'none',
      padding: 0
    },
    li: {
      padding: '8px 12px',
      borderBottom: '1px solid #eee',
      cursor: 'pointer'
    }
  };

  return (
    <ul style={styles.ul}>
      {menuItems.map((item) => (
        // 记得给每个li加唯一的key，这是React列表渲染的要求
        <li key={item} style={styles.li}>{item}</li>
      ))}
    </ul>
  )
}

export default Menu;

方法3：用样式库简化复杂场景 #

如果你觉得内联样式不够灵活（比如没法用:hover伪类、媒体查询），或者样式太复杂导致JS代码臃肿，像你提到的样式库就很实用。比如用styled-components的话，你可以直接创建带样式的组件：

import styled from 'styled-components';

// 创建样式化的ul和li组件
const StyledUl = styled.ul`
  list-style: none;
  padding: 0;
  margin: 0;
`;

const StyledLi = styled.li`
  padding: 8px 12px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  
  // 支持伪类，这是内联样式做不到的
  &:hover {
    background-color: #f5f5f5;
  }
  
  // 还能支持媒体查询
  @media (max-width: 768px) {
    padding: 10px 16px;
  }
`;

const Menu = () => (
  <StyledUl>
    <StyledLi>A</StyledLi>
    <StyledLi>B</StyledLi>
    <StyledLi>C</StyledLi>
    <StyledLi>D</StyledLi>
  </StyledUl>
)

export default Menu;

顺便聊聊内联样式的优缺点 #

优点： #

• 完全隔离的作用域：不用担心样式污染，每个组件的样式只作用于自身
• 动态修改方便：可以直接引用组件内的状态变量，比如根据isActive状态改变li的背景色
• 无需额外配置：不用装样式预处理器或者配置CSS Modules，直接写就行

缺点： #

• 不支持高级CSS特性：像伪类、媒体查询、动画、选择器嵌套这些都没法用
• 代码臃肿：复杂样式会让JS组件变得冗长，可读性下降
• 重复代码：如果不循环渲染，每个li都要写style属性，冗余度高

内容的提问来源于stack exchange，提问作者MadMatt