Adding outline around Switcher-CodePudding

I using the following component package

So far I have done the below but still missing border. How can I add the border outline and that the transition of outline matches the highlight when switching

<SwitchSelector
    onChange={onChange}
    options={[
        { label: 'Milestone', value: 'Milestone' },
        { label: 'Activity', value: 'Activity' },
        ]}
    initialSelectedIndex={0}
    fontColor={'#767676'}
    backgroundColor={'#FFFFFF'}
    wrapperBorderRadius={30}
    selectedFontColor={'#526FD6'}
    selectedBackgroundColor={'#EEF1FB'}
    optionBorderRadius={30}
/>

My outcome

CodePudding user response：

I have added border and selectionIndicatorMargin Props it should fix your issue.

<SwitchSelector 
      onChange={onChange} 
      options={[ { label: 'Milestone', value: 'Milestone' }, { label: 'Activity', value: 'Activity' }, ]} 
      initialSelectedIndex={0} 
      fontColor={ '#767676'} 
      backgroundColor={ '#FFFFFF'} 
      wrapperBorderRadius={30} 
      selectedFontColor={'#526FD6'} 
      selectedBackgroundColor={ '#EEF1FB'} 
      optionBorderRadius={30} 
      border={ '1px solid #f7f7f7'} 
      selectionIndicatorMargin={0} 
/>

CodePudding user response：

I don't know if it's the right way but what I ended but doing in addition to @amir-naeem 's solution was add the below

selectedBackgroundColor={'#EEF1FB; outline: solid thin; border-radius: inherit; outline-color: #526FD6;'}

so passing CSS directly in prop