Reactjs 反应选择默认行为和自定义外观

我在react和react select方面都是新手。在尝试实现一个定制外观的组件时，我读了很多信息，但它不是那么用户友好的IMHO

我希望我的react select组件在一行中显示选定的数据。现在它显示在列中，我附上了图片

顺便问一下，名称、标签字段的用途是什么？确切的区别是什么

<Select
  defaultValue={[models[0], models[1]]}
  isMulti
  options={models}
  className="select-custom-class"
  name="form-field-name"
  options={models}
  placeholder="Model: "
/>

我想通过react select做一些“芯片风格”下拉列表。可能吗？我必须指定什么样的样式选项才能像图片上那样圆角？我还想在芯片中添加一些静态文本，以便始终显示：例如（关于下图）“城市：$here\u come\u值”

也许我应该用另一种成分？这些下拉列表的最终目的是对表进行过滤，因此我想将它们与react-bootstrap-table2链接

---

感谢您的帮助！谢谢。

事实上，我发现了如何制作一个漂亮的单线选择组件，其末尾带有点（如扩展运算符或省略号） 使用现代react jsx语法，而不使用此

            <Select
                defaultValue={defaultValues}
                closeMenuOnSelect={false}
                isMulti
                options={defaultValues}
                components={{
                    IndicatorSeparator: () => null,
                    DropdownIndicator,
                    ClearIndicator,
                    MultiValueContainer: multiValueContainer
                }}

风格呢

const styles = {
    control: (base, state) => ({
        ...base,
        borderRadius: '16px',
        border: '1px solid #E5F7FF',
        boxShadow: 'none',
        boxSizing: 'border - box',
        wordWrap: "break-word",
        '&:hover':
            {
                border: '1px solid #0679A8',
            }
    }),
    valueContainer: (provided, state) => ({
        ...provided,
        textOverflow: "ellipsis",
        maxWidth: "90%",
        whiteSpace: "nowrap",
        overflow: "hidden",
        display: "initial"
    })
};

---

好的，圆形样式`const Styles={control:（base，state）=>（{…base，borderRadius:'16px'，'&:hover'：{border:'1px solid 35; 0679A8'，}），`仍然存在的问题是，当选择了选项时，如何在react select中保持静态文本，为什么我的multi在选择时看起来如此糟糕，以及值、默认值、名称和标签之间的差异，我真的无法得到。提前感谢。因为宽度的原因，这很难看。为什么我需要设置className

const styles = {
    control: (base, state) => ({
        ...base,
        borderRadius: '16px',
        border: '1px solid #E5F7FF',
        boxShadow: 'none',
        boxSizing: 'border - box',
        wordWrap: "break-word",
        '&:hover':
            {
                border: '1px solid #0679A8',
            }
    }),
    valueContainer: (provided, state) => ({
        ...provided,
        textOverflow: "ellipsis",
        maxWidth: "90%",
        whiteSpace: "nowrap",
        overflow: "hidden",
        display: "initial"
    })
};