html - 根据子元素的文本自动调整芯片组件(div)的宽度

Question

我有一个父 div 和 两个子 div(一个 span 和一个 svg)从Material UI 组件库。我的目标是芯片宽度将根据内部文本的长度进行调整(具有合理的最小宽度)。我总是希望芯片内的左右填充量相同。

当我没有在父 div 上设置宽度(或者宽度为 100% 或自动)时，它会填满它自己的父容器的整个宽度，这比我想要的芯片要宽。如果我设置一个固定的像素宽度，太长的文本要么溢出要么被隐藏。我怎样才能使这个父 div 智能调整，使其仅与文本一样宽(加上必要的填充)而不更宽？

(下面的代码在带有样式组件的 React 中，但在语义上与 HTML/CSS 非常相似，并且在样式和盒模型方面操作相同)

const Chip = (props) => (
  <StyledChip
    label="I'm a chip! I'm a chip!"
    clickable={false}
    onDelete={() => console.log("I did something")}
    onClick={() => console.log("I did something")}
  />
)

const StyledChip = styled(MaterialChip)`
  // width: 124px  // doesn't work because it doesn't adjust based on child elements
  // display: inline-block // doesn't work because the child elements get distorted
  // display: inline-flex // child elements no longer distorted, but still takes up full width of container despite no width property
  background-color: ${colors.primary200};
  color: ${colors.primary800};
  font-size: 15px;
  font-family: "Work Sans";
  padding-left: 14px; // this and the next row define the consistent padding I want on the chip
  padding-right: 4px;

  & .MuiChip-deleteIcon {
    color: ${colors.primary800};
    margin-left: 8px;
  }

  & .MuiChip-label {
    padding: 0px;
  }

  &:-moz-focusring {
    outline: none;
    background-color: ${colors.primary200};
    color: inherit;
  }
}

Answer 1

我可能误解了您要实现的目标的某些方面，因为默认的 Chip 样式会根据内容的宽度进行调整。

这是一个基于您的样式的示例，但进行了一些调整:

• 我对一些颜色进行了硬编码，因为我不知道您的 colors 对象中有什么。
• 我将一些样式移动到标签(填充、字体大小)
• 我增加了外部 div (&.MuiChip-root) 样式的特异性，以确保它胜过默认样式

import React from "react";
import Chip from "@material-ui/core/Chip";
import styled from "styled-components";

const StyledChip = styled(Chip)`
  &.MuiChip-root {
    background-color: lightblue;
    color: darkblue;
  }
  & .MuiChip-deleteIcon {
    color: darkblue;
    margin-left: 8px;
  }

  & .MuiChip-label {
    font-size: 15px;
    font-family: "Work Sans";
    padding-left: 14px;
    padding-right: 4px;
  }
`;

const MyChip = props => (
  <StyledChip
    {...props}
    clickable={false}
    onDelete={() => console.log("I did something")}
    onClick={() => console.log("I did something")}
  />
);

export default function Chips() {
  return (
    <div>
      <MyChip label="Hello" />
      <MyChip label="I'm longer than hello" />
    </div>
  );
}

如果这不能完全解决您的问题，请提供该沙箱的一个版本来演示您的问题并描述看起来应该有所不同的地方。