无法更改 react-select 元素的宽度

Question

无论我做什么，我都无法改变 select 的宽度。它总是保持不变，一些默认宽度（比如大约 75px）。

const Container = styled('div')`
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
`;
const selectStyles = {
  valueContainer: base => ({
    width: 300,
  }),
  group: base => ({
    width: 300,
  }),
  container: base => ({
    width: 300,
  }),
  control: base => ({
    width: 300,
  }),
  singleValue: base => ({
    width: 300,
  }),
  input: base => ({
    width: 300,
    color: theme.palette.text.primary,
    '& input': {
      font: 'inherit',
    },
  }),
}

return (
  <SplitPane split='horizontal' defaultSize={260}>
    <Paper
      style={{ width: '100%' }}
    >
      <Container>
        <Select
          styles={selectStyles}
          options={suggestions}
          value={this.state.channel}
          onChange={(value) => (this.setState({ channel: value }))}
        />

我做错了什么？

Answer 1

您刚刚在 Select 组件中拼错了道具名称 styles 而不是 style。

Answer 2

看起来你实际上是在寻找方法让 react-select 宽度在 flexbox 设计中表现得很好（比如 flex-growing），在那种情况下请参考这个，但是简而言之，您可以使用这种样式：

const styles = {
  container: base => ({
    ...base,
    flex: 1
  })
};

<Select styles={styles} />

无法更改 react-select 元素的宽度

Cannot change the width of the react-select element

javascript

reactjs

react-select