Whatever I do I cannot manage to change the width of the select. It always stays the same, some default width (like about 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 }))}
/>
What am I doing wrong?
Seems like you are actually looking for ways to have react-select width behave properly in a flexbox design (such as flex-growing), in that case refer to this reply , but in a nutshell you can just use this styling:
const styles = {
container: base => ({
...base,
flex: 1
})
};
<Select styles={styles} />
你只是做了一个拼写错误的道具命名的styles
,而不是style
里面Select
组件。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.