如何在styled-components中基于组件自身状态而非Props实现样式？

当然可以！你完全没必要把状态提升到父组件——styled-components本身就支持直接结合组件内部状态来写样式，刚好能匹配你想要的写法思路。下面给你几种实用的实现方式：

方法1：直接传递状态作为组件Props #

这是最基础也最常用的方式，styled-components的样式回调参数本质就是组件接收的Props，所以你只需要把组件内部的状态绑定为Styled组件的Props即可：

import styled from 'styled-components';
import { useState } from 'react';

// 这里的props就是你传给StyledDiv的属性，包含我们的状态值
const StyledDiv = styled.div`
  padding: 20px;
  cursor: pointer;
  background-color: ${props => props.bgColor};
`;

function MyComponent() {
  // 组件内部维护状态
  const [bgColor, setBgColor] = useState('white');

  const handleClick = () => {
    setBgColor(prev => prev === 'white' ? 'lightblue' : 'white');
  };

  // 把状态作为Props传给Styled组件
  return (
    <StyledDiv onClick={handleClick} bgColor={bgColor}>
      点击我切换背景色
    </StyledDiv>
  );
}

方法2：使用v6+版本的useStyled钩子（更贴近你的预期写法） #

如果你用的是styled-components v6及以上版本，可以用useStyled钩子来更优雅地关联状态和样式，写法上更接近你想要的直接访问状态的感觉：

import styled, { useStyled } from 'styled-components';
import { useState } from 'react';

const StyledDiv = styled.div`
  padding: 20px;
  cursor: pointer;
  // 用$前缀标记内部使用的Props（可选，但能区分原生HTML属性）
  background-color: ${props => props.$bgColor};
`;

function MyComponent() {
  const [bgColor, setBgColor] = useState('white');
  // 把状态映射为Styled组件需要的Props
  const styledProps = useStyled({ $bgColor: bgColor });

  const handleClick = () => {
    setBgColor(prev => prev === 'white' ? 'lightblue' : 'white');
  };

  return (
    <StyledDiv onClick={handleClick} {...styledProps}>
      点击我切换背景色
    </StyledDiv>
  );
}

方法3：借助CSS变量实现无Props传递 #

如果你不想显式传递Props，还可以用CSS变量来间接关联状态和样式，这种方式更灵活，适合复杂样式场景：

import styled from 'styled-components';
import { useState } from 'react';

const StyledDiv = styled.div`
  padding: 20px;
  cursor: pointer;
  // 读取CSS变量
  background-color: var(--bg-color);
`;

function MyComponent() {
  const [bgColor, setBgColor] = useState('white');

  const handleClick = () => {
    setBgColor(prev => prev === 'white' ? 'lightblue' : 'white');
  };

  // 通过style属性注入CSS变量
  return (
    <StyledDiv 
      onClick={handleClick} 
      style={{ '--bg-color': bgColor }}
    >
      点击我切换背景色
    </StyledDiv>
  );
}

简单总结一下：你一开始的思路是对的，styled-components的样式回调就是用来接收动态值的，只要把组件内部状态通过Props或CSS变量传递进去，就能实现基于自身状态的样式变化，完全不需要冗余的状态提升操作。

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