如何在react-select中向样式道具添加媒体查询？

Question

我想添加一个媒体查询，以使控件对象的宽度在768px或更高的宽度上更改，但是我无法在样式下向控件功能添加JavaScript。

const mediaquery = "@media (min-width: 768px)"

<Select
  styles={{
    control: (base: CSSProperties, state: ControlProps<{}>) => ({
      ...base,
      width: "200px",
      // below code throws an error
      mediaquery: { width: "400px" }
  }}
/>

Answer 1

根据react-select文档，您可以为元素提供className道具。这里是参考：https://react-select.com/styles#using-classnames

您可以创建一个.css文件，并在那里定义所有媒体查询。然后在您的react-select组件中导入import './style.css';之类的.css文件。