Skip to main content
se eliminaron 54 caracteres en el cuerpo
Origen Enlace
Agustin G.
  • 2.8k
  • 1
  • 17
  • 50

Tengo el siguiente componente que renderiza un select:

import React from 'react'; import Select from 'react-select';

const InputSelect = props => {
  return (
   <React.Fragment>
    {props.label && <label htmlFor={props.name}>{props.label}</label>}
    <Select[![introducir la descripción de la imagen aquí][1]][1]<Select
     name={props.name}
     options={props.options}
     placeholder={props.placeholder}
     isSearchable={props.isSearchable}
     isClearable={props.isClearable}
     isLoading={props.isLoading}
     value={props.value}
     getOptionValue={option => option.pk}
     getOptionLabel={option => option.label || option.name}
     onChange={value => props.onChange(props.name, value)}
     noOptionsMessage={() => props.noOptionsMessage}
     styles={{
      control: base => ({
        ...base,
        border: props.error ? '1px solid #dc3545' : '1px solid #ced4da',
      })
     }}
   />
   {props.error && <p className='text-danger'>{props.error}</p>}
 </React.Fragment>
 ); 
};

export default InputSelect;

Asi es como se ve actualmente. Yo quiero pasarle las clases de bootstrap ´´form-control form-control-sm´´con la idea de que el select se achique y tome el mismo tamaño que todos los demas inputs del sitio, que tienen estas clases que mencioné.

introducir la descripción de la imagen aquí

Entonces lo que yo hago es agregarle la prop ´´className='form-control form-control-sm´´pero el resultado no es el que espero:

introducir la descripción de la imagen aquí

El navegador me muestra esto:

introducir la descripción de la imagen aquí

Tengo el siguiente componente que renderiza un select:

import React from 'react'; import Select from 'react-select';

const InputSelect = props => {
  return (
   <React.Fragment>
    {props.label && <label htmlFor={props.name}>{props.label}</label>}
    <Select[![introducir la descripción de la imagen aquí][1]][1]
     name={props.name}
     options={props.options}
     placeholder={props.placeholder}
     isSearchable={props.isSearchable}
     isClearable={props.isClearable}
     isLoading={props.isLoading}
     value={props.value}
     getOptionValue={option => option.pk}
     getOptionLabel={option => option.label || option.name}
     onChange={value => props.onChange(props.name, value)}
     noOptionsMessage={() => props.noOptionsMessage}
     styles={{
      control: base => ({
        ...base,
        border: props.error ? '1px solid #dc3545' : '1px solid #ced4da',
      })
     }}
   />
   {props.error && <p className='text-danger'>{props.error}</p>}
 </React.Fragment>
 ); 
};

export default InputSelect;

Asi es como se ve actualmente. Yo quiero pasarle las clases de bootstrap ´´form-control form-control-sm´´con la idea de que el select se achique y tome el mismo tamaño que todos los demas inputs del sitio, que tienen estas clases que mencioné.

introducir la descripción de la imagen aquí

Entonces lo que yo hago es agregarle la prop ´´className='form-control form-control-sm´´pero el resultado no es el que espero:

introducir la descripción de la imagen aquí

El navegador me muestra esto:

introducir la descripción de la imagen aquí

Tengo el siguiente componente que renderiza un select:

import React from 'react'; import Select from 'react-select';

const InputSelect = props => {
  return (
   <React.Fragment>
    {props.label && <label htmlFor={props.name}>{props.label}</label>}
    <Select
     name={props.name}
     options={props.options}
     placeholder={props.placeholder}
     isSearchable={props.isSearchable}
     isClearable={props.isClearable}
     isLoading={props.isLoading}
     value={props.value}
     getOptionValue={option => option.pk}
     getOptionLabel={option => option.label || option.name}
     onChange={value => props.onChange(props.name, value)}
     noOptionsMessage={() => props.noOptionsMessage}
     styles={{
      control: base => ({
        ...base,
        border: props.error ? '1px solid #dc3545' : '1px solid #ced4da',
      })
     }}
   />
   {props.error && <p className='text-danger'>{props.error}</p>}
 </React.Fragment>
 ); 
};

export default InputSelect;

Asi es como se ve actualmente. Yo quiero pasarle las clases de bootstrap ´´form-control form-control-sm´´con la idea de que el select se achique y tome el mismo tamaño que todos los demas inputs del sitio, que tienen estas clases que mencioné.

introducir la descripción de la imagen aquí

Entonces lo que yo hago es agregarle la prop ´´className='form-control form-control-sm´´pero el resultado no es el que espero:

introducir la descripción de la imagen aquí

El navegador me muestra esto:

introducir la descripción de la imagen aquí

Origen Enlace
Agustin G.
  • 2.8k
  • 1
  • 17
  • 50

Pasar correctamente una clase a react-select

Tengo el siguiente componente que renderiza un select:

import React from 'react'; import Select from 'react-select';

const InputSelect = props => {
  return (
   <React.Fragment>
    {props.label && <label htmlFor={props.name}>{props.label}</label>}
    <Select[![introducir la descripción de la imagen aquí][1]][1]
     name={props.name}
     options={props.options}
     placeholder={props.placeholder}
     isSearchable={props.isSearchable}
     isClearable={props.isClearable}
     isLoading={props.isLoading}
     value={props.value}
     getOptionValue={option => option.pk}
     getOptionLabel={option => option.label || option.name}
     onChange={value => props.onChange(props.name, value)}
     noOptionsMessage={() => props.noOptionsMessage}
     styles={{
      control: base => ({
        ...base,
        border: props.error ? '1px solid #dc3545' : '1px solid #ced4da',
      })
     }}
   />
   {props.error && <p className='text-danger'>{props.error}</p>}
 </React.Fragment>
 ); 
};

export default InputSelect;

Asi es como se ve actualmente. Yo quiero pasarle las clases de bootstrap ´´form-control form-control-sm´´con la idea de que el select se achique y tome el mismo tamaño que todos los demas inputs del sitio, que tienen estas clases que mencioné.

introducir la descripción de la imagen aquí

Entonces lo que yo hago es agregarle la prop ´´className='form-control form-control-sm´´pero el resultado no es el que espero:

introducir la descripción de la imagen aquí

El navegador me muestra esto:

introducir la descripción de la imagen aquí