Enhancing the appearance of the Switcher by framing it with

I've been working with the component package https://www.npmjs.com/package/react-switch-selector to create a design similar to this https://i.stack.imgur.com/voHqm.png

Although I have made some progress, I'm struggling to add a border outline. How can I achieve this and ensure the transition of the outline matches the highlighting 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}
/>

This is what I currently have:

https://i.stack.imgur.com/aaVLW.png

htmlcssreactjssassborder

Answer №1

To resolve the issue, I updated the border and selectionIndicatorMargin Props in your code.

<SwitchSelector 
      onChange={handleChange} 
      options={[ { label: 'Option A', value: 'A' }, { label: 'Option B', value: 'B' }, ]}  
      initialSelectedIndex={0} 
      fontColor={'#333333'} 
      backgroundColor={'#FFFFFF'} 
      wrapperBorderRadius={20} 
      selectedFontColor={'#FF0000'} 
      selectedBackgroundColor={'#DDDDDD'} 
      optionBorderRadius={20} 
      border={'2px solid #CCCCCC'} 
      selectionIndicatorMargin={5} 
/>

Answer №2

When trying to implement @amir-naeem 's solution, I wasn't sure if it was the correct approach. So, in addition to that, I decided to include the following:

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

This allowed me to pass CSS directly as a prop.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CSS - Issue with table cell height exceeding in Mozilla Firefox and Internet Explorer

Examining the code below <div style="border:solid 5px orange;width:400px;height:400px"> <div style="display:table;border:solid 1px red;width:100%;height:100%"> <div style="display:table-row;border:solid 1px blue"> <div sty ...

csshtmlwebcss-tables

Executing GraphQL mutation server-side utilizing an Apollo server with a Node.js script

I am currently running a scraping script using Puppeteer, and my goal is to save each scraped row into the database. However, I have encountered an error: Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This ...

node.jsreactjsnext.jsreact-apolloprisma-graphql

Should ng-binding be avoided in CSS selectors as a general rule?

Recently, I stumbled upon this code snippet in our codebase: li.ng-binding span { font-size: 13px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; } The selector above doesn't actually apply to one of the intended 'li& ...

cssangularjs

How can I make an HTML button the default option within a form?

Currently, I am working on an asp.net page which contains a mix of asp.net buttons and HTML input[type=button] elements. These HTML buttons are specifically used to initiate AJAX calls. My dilemma arises when the user hits ENTER - instead of defaulting to ...

c#javascriptasp.net.nethtml

Converting a Class Component to a Functional Component in React: A Step-by-Step

I need to refactor this class-based component into a functional component class Main extends Components{ constructor(){ super() this.state = { posts:[ { id:"0", description:"abc", imageLink: ...

javascriptreactjs

Ways to update the div's color according to a specific value

Below are the scripts and styles that were implemented: <script src="angular.min.js"></script> <style> .greater { color:#D7E3BF; background-color:#D7E3BF; } .less { color:#E5B9B5; background-co ...

javascripthtmlcssangularjsng-class

What is the best way to iterate through states within an array using React?

Can someone help me create a button that can cycle through different states in the given array? I want the button to change State_1 to State_2, State_2 to State_3, and then back to State_1 for each object. I'm struggling to figure out how to cycle thr ...

reactjsarraysjsonreact-hooks

My attempts to decrease the volume of an HTML5/CSS3 Audio element have been unsuccessful

Hey there! I'm currently working on my very first webpage and recently added an audio element that is functioning perfectly. The only issue I'm encountering is trying to position the element at the bottom of my page. I've already attempted ...

csshtml

Setting the height of a div to 100% is not effective

I've designed a two-column layout. You can view the code on jsfiddle.net. My problem is that I want the center line with a width of 10px to have a height of 100%. I have a container div with the ID #obal (set to height: auto). When I set the height of ...

htmlcss

Animating transitions in a Vuetify data table

I am in the process of animating the data on a Vuetify data table. My objective is to make the current data slide out to the right when Next is clicked, and then have the new data slide in from the left. The current result I am getting can be viewed here: ...

cssvue.jsvuetify.js

Steps for eliminating a column from a table

By including the detailPanel option, a new column with an icon button will be automatically added. Is there a way to eliminate this additional column that is generated? Appreciate your help! ...

cssmaterial-uimaterial-table

The command "react-app-rewired" cannot be found, even after being uninstalled from the system

A while back, I added the following package to my project: npm install react-app-rewired --save-dev This required me to modify the package.json file like so: "scripts": { "start": "react-scripts start", "build&qu ...

node.jsreactjsnpmwebpackpackage

Floating with Bootstrap Utility

Have you ever wondered about the proper usage of bootstrap float utility? Check out this example: <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class=" ...

htmlcssbootstrap-4

Having trouble with the scrolling feature on a read-only text area within a form

My form allows users to input their data, but once submitted, the form becomes read-only. However, I'm facing an issue where the data in the text area is not scrollable even though it should be. I need assistance in figuring out why the content in th ...

jqueryhtmlcssbootstrap-4

Pretty print error: The specified file or directory does not exist

I recently incorporated eslint and prettier into my existing CSR react project, but when I ran 'npm run prettier' I encountered the following errors. How can I resolve this error? Just so you know, there is a src/App.tsx file contrary to the err ...

reactjseslintprettier

Mastering the art of jQuery scrolling: A step-by-step guide

Is there a way to utilize jQuery for scrolling purposes? For example, transforming this: <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#home">Home <span class="sr-only">(current)</span></a> ...

javascriptjqueryhtmlcss

What is the process for transmitting information via a Link in Next.js?

In my upcoming 13.1.5 version, I am faced with a challenge of sending the value of contact.name through a Link in my component. I am looking for the most effective approach to achieve this. The initial code block for the Link represents my original code. ...

javascriptreactjsnext.jsnext-link

Input field with automatic focus and menu item

Working with React and Material-UI version 3 I am trying to open a Dialog that automatically focuses on a textField. The issue I am facing is that the autoFocus feature seems to only work for a brief moment before the MenuItem collapses. Check out this s ...

reactjsmaterial-ui

How to place text on top of a thumbnail in Bootstrap using HTML

I've come across similar questions here, but none of the suggested solutions have worked for me. (I attempted making the image a background as recommended on how to display text over an image in Bootstrap 3.1, but it didn't seem to be effective) ...

htmlcssimagetwitter-bootstrap

Struggling to implement react-papaparse for streaming a local file row by row - could my coding be incorrect, or is this feature simply not feasible?

I have successfully used react-papaparse to parse a local file with onFileLoad={this.handleOnFileLoad}, but I am now trying to stream the file. I attempted to pass onStep or step in props, as indicated in the documentation, but it is not triggering. Am I ...

reactjsstreampapaparse