如何使用Styled Components实现与内联样式一致的效果？

下面是完全匹配你原代码功能的Styled Components实现版本：

1. 导入依赖并创建样式化组件 #

import styled from 'styled-components';
// 根据你实际使用的组件库调整导入路径，这里假设是react-bootstrap
import { NavItem, NavLink } from 'react-bootstrap';

// 样式化NavItem，动态控制底部边框
const StyledNavItem = styled(NavItem)`
  // 把原类名nav-item-padding-one-half的样式迁移到这里（推荐）
  padding: 0.5rem;
  border-bottom: ${({ isActive }) => isActive ? 'solid 2px var(--color-green)' : 'none'};
`;

// 样式化NavLink，替代原nav-link-active类的样式控制
const StyledNavLink = styled(NavLink)`
  // 可添加基础nav-link的默认样式
  // 激活状态样式
  ${({ isActive }) => isActive && `
    color: var(--color-green);
    // 这里补充原nav-link-active类的所有样式
  `}
`;

2. 重构NavbarLink组件 #

class NavbarLink extends React.Component {
  render() {
    const isActive = this.props.location.pathname.includes(this.props.path);
    return (
      <StyledNavItem isActive={isActive}>
        <StyledNavLink
          to={this.props.path}
          onClick={() => this.props.onItemClicked()}
          isActive={isActive}
          className="nav-link" // 保留基础nav-link类（若组件库需要）
        >
          {this.props.children}
        </StyledNavLink>
      </StyledNavItem>
    );
  }
}

关键说明 #

• Styled Components通过props传递状态动态生成样式，用${({ isActive }) => ...}语法读取props
• 若想保留原有类名（如nav-item-padding-one-half），可直接在样式化组件上添加className属性，二者不会冲突
• 推荐将所有样式迁移到Styled Components中，让样式与组件逻辑绑定，更易维护

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