React Styled Components自定义类样式宽度不生效问题求助

直接修复代码 #

修改你的StyledTodoItem样式，给目标类添加flex-shrink: 0来锁定宽度，同时给其他子元素分配合理的flex规则：

import styled from 'styled-components';

type Props = {
  bg: 'even' | 'odd';
};

export const StyledTodoItem = styled.div<Props>`
  width: 100%;
  display: flex;
  background: ${({ bg }) => (bg === 'odd' ? 'white' : '#ededed')};
  height: ${({ theme }) => theme.todoTable.elementMinHeight};
  border-right: 1px solid ${({ theme }) => theme.palette.borderColor};

  .todoTitle {
    display: flex;
    justify-content: center;
    padding: 10px 20px;
    width: 150px;
    flex-shrink: 0; /* 核心：禁止元素被flex布局压缩 */
    background: red;
  }

  .todoDescription {
    flex: 1; /* 占满容器剩余空间 */
    padding: 10px 20px;
  }

  .todoAction {
    width: 120px;
    flex-shrink: 0; /* 锁定操作区宽度 */
    padding: 10px 20px;
  }
`;

问题根源 #

这不是styled-components与CSS层叠的冲突，而是Flex布局的默认行为：

• Flex容器的子元素默认是flex-shrink: 1，当容器总宽度不足时，子元素会自动缩小以适配容器，你设置的width会被这个规则覆盖。
• 背景色能正常生效，是因为它不受flex尺寸规则影响，只要选择器优先级足够就会生效。

通用应对方案 #

• 固定尺寸的Flex子元素：搭配flex-shrink: 0使用width/height，或直接用flex-basis（Flex布局中优先识别该属性定义基础尺寸）。
• 自适应剩余空间的元素：设置flex: 1（等价于flex-grow:1; flex-shrink:1; flex-basis:0%），自动填充容器剩余空间。
• 排查优先级问题：如果局部样式被全局CSS覆盖，可提升选择器层级（比如用& > .todoTitle代替.todoTitle），利用styled-components的局部类名优先级优势。
• 避免全局样式污染：尽量不在全局CSS中给Flex子元素设置通用的flex-shrink、width规则，若必须使用，需确保局部样式优先级更高。

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