根据子元素的文本自动调整芯片组件的宽度（div）

Question

我有一个父项 div，其中 two child divs（一个 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 样式会根据内容的宽度进行调整。

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

我 hard-coded 一些颜色，因为我不知道你的 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>
  );
}

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

根据子元素的文本自动调整芯片组件的宽度（div）

Automatically adjust width of chip component (div) based on text of child elements

html

css

reactjs

material-ui

styled-components