如何更改输入容器的样式

Question

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

我可以更改输入react-select__input的样式，但是除非使用此特定的类名，否则父级是不可达的。

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

我很喜欢使用该类名css-15n6m，但根据迄今为止的经验，它会随着软件包的每个版本而改变

Answer 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也很好。

Answer 2

您到底要样式是什么？背景？保证金？宽度？身高？

您能举例说明您要达到什么目标吗？

此外，您可以将CSS直接添加到标记中，例如：

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

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