¿Cómo puedo hacer que un componente React Select (específicamente multiselección) pueda desplazarse horizontalmente cuando el cuadro se desborda? He intentado
<Select // some other props styles={{ valueContainer: (base) => ({ ...base, overflowX: 'scroll', }), }} isMulti />Pero eso no funciona. Estoy usando React y Tailwind CSS.
No estoy seguro de que esto funcione, y también es un poco complicado:
styles={{ valueContainer: (base) => ({ ...base, overflowX: 'scroll', flexWrap: 'unset', }), multiValue: (base) => ({ ...base, flex: '1 0 auto', }) }}Tenga en cuenta que esto presentará nuevos problemas con las barras de desplazamiento: en Windows, supongo que las barras de desplazamiento estarán visibles de forma permanente y alterarán el diseño, mientras que en una Mac, las barras de desplazamiento solo aparecerán mientras se desplaza, pero luego ocultarán la mayor parte del contenido del valor seleccionado. envase.
Si está utilizando Tailwind CSS , simplemente puede agregar className='overflow-x-scroll' para habilitar el desplazamiento horizontal.
<Select // some other props styles={{ valueContainer: (base) => ({ ...base, overflowX: 'scroll', }), }} isMulti className='overflow-x-scroll' />