I have below select component in my react. I need to modify this component.

so I am using below code for it.

 const customStyles = {
        option: (provided:any, state:any) => ({
          ...provided,
          margin:'10px',
        }),
        control: (provided:any) => ({
          ...provided,
          height: '48px !important',
          'line-height': '2rem center',
          border: '#e6e6e6 solid 5px !important',
        }),
        input:(provided:any)=>({
            ...provided,
            'margin-top':'-25px',
        })
      }

 

below is select component.

  <Select
          id="sponsor" 
          name="sponsor"   
         placeholder={sponsor}
         styles={customStyles}
          options={result.map((sponsor:Sponsor)=>
                ({ label: sponsor.name, value: sponsor.id })
      )}
      >

actually seniors are not allowing to write css in react jsx file. is there anyway I can convert this customStyles code to css format? I tried a lot but its not easy to modify css for react-select component.