如何更改输入容器的样式答案

【问题标题】：How do I change the styles of the input container如何更改输入容器的样式
【发布时间】：2019-02-27 20:22:50
【问题描述】：

我浏览了文档，但似乎找不到任何更改此输入容器样式的方法。

我可以更改输入 react-select__input 样式，但除非我使用这个特定的类名，否则父级是无法访问的。

唯一的其他方法是使用value-container > div:last-child 但这只是一个坏主意，在这种情况下，我偶尔会更改组件。

我喜欢使用类名 css-15n6m，但根据我目前的经验，它会随着包的每个版本而变化

【问题讨论】：

您可以尝试覆盖输入本身的样式。在你的情况下就像react-select__input。
这在这种情况下不起作用，因为我无法删除放置在容器上的填充并且输入本身已经很小
你能提供一些你做过的代码吗？

标签： javascript css sass react-select

【解决方案1】：

React-Select 使用 EmotionJs 进行样式设置，并且可以为任何内部组件传入覆盖样式。比如说，我想覆盖 Menu 控件的基本样式。我可以为此提供一种方法：

const menuStyles = (base, state) => {
  const { menuIsOpen } = state.selectProps;
  let addons = {
    border: '1px solid #ccc',
    zIndex: 1000,
    marginTop: 0
  };
  if (menuIsOpen) {
    addons = Object.assign(addons, {
      borderTopLeftRadius: 0,
      borderTopRightRadius: 0,
      borderTop: 0,
      boxShadow: '0 4px 5px rgba(0, 0, 0, .15)'
    });
  }
  return Object.assign(base, addons);
};

// ...
<Select styles={{menu: menuStyles}} />

它需要玩一点才能真正弄清楚，但有一个pretty good topic in the documentation。

注意：关键在于，试图找出哪个Component 是您真正想要设置样式的组件。 Input 组件不是 HTML 输入。与 React-Select 一起使用的唯一一个是隐藏控件。很可能您正在尝试为构成可见控件的众多 Container 元素之一设置样式，例如 SelectContainer、ValueContainer 或 MultiValueContainer。就像我说的，你必须玩一点，但你可以做到。 documentation around the Components in the documentation 也不错。

【讨论】：

使用这种方法是完全可以接受的，并且在大多数情况下它会起作用。但具体来说，输入容器没有办法解决它。使用输入样式将为 react-select__input 声明样式，但不会为容器 div css-15n6m 声明样式。
你知道，你是对的。 React-Select Input 不是你所期望的。我会修改我的答案。

【解决方案2】：

你到底想设计什么风格？背景？边距？宽度？身高？

您能否举例说明您要达到的目标？

另外，你可以直接在标签中添加css，例如：

<div style="width:10px;height:20px;background-color:#b10000;"></div>

但如果不参考类或 id，您将无法单独更改标签（元素）的样式。

【讨论】：

我正在尝试重置边距和填充，并且由于 react-select 正在创建自己的输入容器 (div) 我无法应用这些内联样式
这只会改变可能包含 React-Select 元素的容器的样式，而不是元素本身。