如何设置 react-select 组件的样式，使其与某些文本内联？

Question

I want to style my react-select component such that it looks like the below image (inline with the text).

I can do this easily using the normal select component inside a span and remove the border like this:

<select disabled={readOnlyMode} style={{ border: 'none' }}>
    <option default>Select response</option>
</select>

But I want to use react-select for this and unable to figure out what styling should I apply.

Answer 1

react-select provides you with the ability to adjust the styles for the components. You can check it here: https://react-select.com/styles .

In your case, you should adjust control style key:

const customStyles = {
  control: (provided, state) => ({
    ...provided,
    border: 'none',
  }),
};

And pass customStyles as a styles prop in react-select component

Answer 2

you can custom change the indicator using following code

import React from "react";
import ReactDOM from "react-dom";
import Select, { components } from "react-select";


class Test extends React.Component {
  render() {
    const DropdownIndicator = (props) => {
    return (
      components.DropdownIndicator && (
        <components.DropdownIndicator {...props}>
          <img src="https://via.placeholder.com/30x30" />
        </components.DropdownIndicator>
        )
      );
    };
    return (
      <Select
        components={{ DropdownIndicator }}
        // pass other props
      />
    );
  }
}

ReactDOM.render(<Test />, document.getElementById("root"));

found this answer here and react-select styling documentations can be found here