如何设置Reactstrap下拉菜单项宽度完全匹配内容宽度？

使用Reactstrap下拉菜单组件，基础实现代码如下：

import React from "react";
import {
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
} from "reactstrap";

export default class DropDownTest extends React.Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      dropdownOpen: false,
    };
  }

  toggle() {
    this.setState((prevState) => ({
      dropdownOpen: !prevState.dropdownOpen,
    }));
  }

  render() {
    return (
      <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
        <DropdownToggle caret>test</DropdownToggle>
        <DropdownMenu>
          <DropdownItem>A</DropdownItem>
          <DropdownItem>A</DropdownItem>
          <DropdownItem>A</DropdownItem>
          <DropdownItem>A</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    );
  }
}

现存问题 #

DropdownItem默认宽度过大，展示单字母A时存在大量冗余空白，预期效果为菜单项宽度完全匹配内容宽度，即刚好适配单个字母A的宽度。

对应DOM结构如下：

<div
  tabindex="-1"
  role="menu"
  aria-hidden="false"
  class="dropdown-menu show"
  style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(515px, 41px, 0px);"
  x-placement="bottom-start"
>
  <button
    type="button"
    tabindex="0"
    role="menuitem"
    class="dropdown-item"
  >
    A
  </button>
  <button
    type="button"
    tabindex="0"
    role="menuitem"
    class="dropdown-item"
  >
    A
  </button>
  <button
    type="button"
    tabindex="0"
    role="menuitem"
    class="dropdown-item"
  >
    A
  </button>
  <button
    type="button"
    tabindex="0"
    role="menuitem"
    class="dropdown-item"
  >
    A
  </button>
</div>

默认样式规则：

.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.25rem 1.5rem;
  clear: both;
  font-weight: 400;
  color: #212529;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}

项目模板自定义覆盖样式：

.dropdown-menu .dropdown-item {
  color: #66615b;
  font-size: 14px;
  padding: 10px 45px 10px 15px;
  clear: both;
  white-space: nowrap;
  width: 100%;
  display: block;
}

已尝试给DropdownItem添加p-0类移除内边距，未达到预期效果。

改padding无效的核心原因有两个：

1. Bootstrap默认给.dropdown-menu设置了min-width: 10rem的最小宽度限制，父容器本身就有固定最小宽度，子元素自然会被撑宽
2. 两处样式规则都给.dropdown-item强制设置了width: 100%，子元素会自动占满父容器的全部宽度，和内边距无关

按以下两步修改即可实现宽度自适应内容：

• 给DropdownMenu添加类名移除默认最小宽度，让父容器宽度随内容收缩
• 覆盖.dropdown-item的宽度规则，将width:100%改为宽度自适应，按需调整内边距即可

代码实现 #

组件修改 #

render() {
  return (
    <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
      <DropdownToggle caret>test</DropdownToggle>
      {/* 给下拉菜单加w-auto类，取消默认最小宽度 */}
      <DropdownMenu className="w-auto p-0">
        {/* 给下拉项加w-auto类，取消100%宽度，按需设置内边距 */}
        <DropdownItem className="w-auto px-2">A</DropdownItem>
        <DropdownItem className="w-auto px-2">A</DropdownItem>
        <DropdownItem className="w-auto px-2">A</DropdownItem>
        <DropdownItem className="w-auto px-2">A</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  );
}

样式覆盖（如果工具类优先级不够被模板样式覆盖时添加） #

/* 移除下拉菜单默认最小宽度 */
.dropdown-menu.w-auto {
  min-width: 0 !important;
}
/* 取消下拉项100%宽度规则，调整内边距到合适大小 */
.dropdown-menu .dropdown-item.w-auto {
  width: auto !important;
  padding: 0.25rem 0.5rem; /* 可根据需求自行调整数值 */
}

补充说明：如果下拉项内容长度不一致，父容器会自动按最宽的子元素宽度撑开，所有下拉项宽度保持统一且刚好适配最长内容，无需额外处理。

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