having trouble customizing react-select to fit bootstrap sm styling

I am currently utilizing react-select multi-select feature from the npm package at this link. My project is styled using bootstrap 4, and I am aiming to have the react-select component match the size of the sm class in Bootstrap. To achieve this, I attempted passing the following styles to the style prop in react-select.

const customStyles = {
  control: () => ({
    height: 'calc(1.5em + .5rem + 2px)',
    padding: '.25rem .5rem',
    fontSize: '.875rem',
    lineHeight: '1.5',
    borderRadius: '.2rem'
  })
}

The styles provided are similar to those of the form-control-sm class in Bootstrap. Essentially, I want the react-select component to mirror the size of the "sm" class in bootstrap's form-control.

Specifically, I am seeking to replicate the styling found at this link where the class is set as class="custom-select custom-select-sm".

javascriptcssreactjsbootstrap-4react-select

Answer №1

Consider incorporating the following custom styles:

const myStyles = {
container:  (provided, state) => ({
  ...provided,
  padding: '0',
  border: '0',
  fontSize: '0.65625rem',
}),
control:  (provided, state) => ({
  ...provided,
  height: 'calc(1.5em + 0.5rem + 2px)',
  minHeight: 'calc(1.5em + 0.5rem + 2px)',
  fontSize: '0.65625rem',
  borderColor: '#d8dbe0',
  boxShadow: 'inset 0 1px 1px rgba(0, 0, 0, 0.075)',
  transition: 'background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out',
  ':hover': {
    borderColor: state.isFocused ? '#66afe9' : '#d8dbe0',
    boxShadow: state.isFocused ? 
      'inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6)' : 
      'inset 0 1px 1px rgba(0, 0, 0, 0.075)',
  }
}),
valueContainer: (provided, state) => ({
  ...provided,
  marginTop: '0',
  marginLeft: '6px',
  padding: '0',
  border: '0',
}),
dropdownIndicator: (provided, state) => ({
  ...provided,
  marginTop: '0',
  padding: '0',
  border: '0',
  width: '16px',
}),
clearIndicator: (provided, state) => ({
  ...provided,
  marginTop: '0',
  padding: '0',
  border: '0',
  width: '16px',
}),
indicatorsContainer: (provided, state) => ({
  ...provided,
  paddingRight: '4px',
  border: '0',
}),

}

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

Make sure to only update the state in useEffect after retrieving the data from the localStorage

Trying to troubleshoot the continuous looping and crashing issue in my app caused by passing variables in the dependency array of the useEffect hook. These variables are state variables from the context provider. The goal is to make the useEffect hook run ...

javascriptreactjsreact-nativereact-hookslocal-storage

Creating a fresh React Native project reveals 9 vulnerabilities as highlighted by the Npm audit feature

React Native project creation leads to detection of 9 vulnerabilities after running npm audit. A summary of the vulnerablities is presented in a tabular format below. │ High │ Denial of Service │ ...

reactjsreact-nativenpm

Error: Trying to access the 'name' property of an undefined value is not possible

The issue arises with the undefined value of currentPackage. render() { const { hasAccounts, asideClassesFromConfig, disableScroll, htmlClassService, currentPackage, user, } = this.props; const isActive = checkStatus(user?.status); const packageLogo = curr ...

javascriptreactjs

Why isn't the document.getElementById().value() function functioning properly within my PHP code?

When working on my PHP code, I included the following: <select class="ht__select" onchange="sorting('<?php echo $id ?>')" id="sorting"> <option value="">Default sorting</option> <option value="low_price">Sor ...

javascriptphphtml

When decoding a JWT, it may return the value of "[object Object]"

Having some trouble decoding a JSON web token that's being sent to my REST API server. I can't seem to access the _id property within the web token. Below is the code I'm currently using: jwt.verify(token, process.env.TOKEN_SECRET, { comp ...

javascriptnode.jsexpressjwt

Error encountered in dynamically generating JSON due to an unterminated string literal

I am attempting to create a JSON variable to pass to a slideshow plugin. Here is the code found within the head section: <script type="text/javascript"> var photos = []; {% for service in company.services.all %} photos.push({ ...

javascriptjquerydjango

Utilizing BeautifulSoup 4 to extract JSON data from Script tags in HTML

Looking to extract the code from this webpage link Currently using python with json and bs4. See full page source here: https://pastebin.com/iU5c9GBF <div class="Actions"> <input class="action" type="subm ...

javascriptpythonjsonweb-scrapingbeautifulsoup

What is the best way to transform HeadersInit into an Object<string,string> data type?

In short, I am faced with the task of converting the headers of a RequestInit into a format that another library can comprehend. This particular library requires the headers to be in the format of Object<string, string>. Initially, I attempted someth ...

javascripttypescript

Looking to run a JavaScript command without the need for any triggering events?

Is there a way to execute the following JavaScript code without using any event and have it run at the start, onLoad of the page? function calculateDiscount() { var totalPrice = document.getElementsByClassName("Total")[0].innerHTML; var discountedPr ...

javascripthtmlcss

Tips for revealing a link after the user clicks on the submit button

I am looking to set up a webpage that will display a hyperlink after the submit button is clicked. For example, 1) wedding 2) engagement 3) birthday All three items are checkbox buttons and there is a textbox to input the budget. After clicking the sub ...

javascripthtmlhyperlink

Tips for adding information to a PHP file

Previously, I used PHP to append form data to a JSON file. Currently, I am working on a PHP file instead of a JSON file with two parameters, as shown to users in the figure below. Image URL Link My Form: <form action="process.php" method="POST"> ...

javascriptphpjson

What is the process for customizing the onmouseover property in HTML?

I am currently working on customizing tabs. I want to underline the title of the active tab, but for some reason I am having trouble achieving this with CSS. It seems like I might need a CSS syntax that I am not familiar with. As a solution, I am consider ...

htmlcssonmouseover

The section cannot be shown in a flex layout within a grid container

My goal is to showcase a grid layout containing multiple sections within a div, but I'm encountering an issue where the sections are only displaying as blocks. I am seeking assistance in making the second portion of the data appear flexed. Currently, ...

htmlcssvue.js

How to choose the second anchor element in a list with Protractor

I am facing a challenge where I need to click on the 2nd anchor tag in a list of anchor tags. <ul id="shortcuts"> <li><a ui-sref="app.journeyExplorer" href="#/journey-explorer/"><span class="ng-binding">1</span></a> ...

javascriptangularjsseleniumselenium-webdriverprotractor

You cannot change the value of constant 'setMessage'

Having a problem with the TextField component from Material UI. I am attempting to update the state in React using the onChange prop. However, I keep getting this error message saying "invalid assignment to const 'setMessage'". It' ...

reactjsmaterial-uijsx

What is the best approach for encoding text inputs automatically?

In order to prevent my application from crashing due to the error "A potentially dangerous Request.Form value was detected...", I initially disabled page validation. However, I am now reassessing this approach and aiming to resolve it properly. Is there a ...

c#javascript.netasp.net.net-3.5

Basic JavaScript string calculator

I'm in the process of creating a basic JavaScript calculator that prompts the user to input their name and then displays a number based on the input. Each letter in the string will correspond to a value, such as a=1 and b=2. For example, if the user e ...

javascript

How to hide functions in Angular source code

Here's a common query. Typically, the code we develop in Angular gets compiled into a bundle file that is then sent to the browser, correct? The JavaScript code we write can be easily seen as is in the bundle file when viewing the source. How can we ...

javascriptangularjs

The Dropdownlist jQuery is having trouble retrieving the database value

Within my database, there is a column labeled Sequence that contains integer values. For the edit function in my application, I need to display this selected number within a jQuery dropdown list. When making an AJAX call, I provide the ProductId parameter ...

javascriptjqueryasp.netajaxjson

Activate the jQuery UI datepicker with a trigger

Within my code, I have a span element that displays a date in the format mm/dd/yyyy. <span class="editableDateTxt">06/10/2014</span> My goal is to have an inline editable date popup or utilize jQuery UI's datepicker when this span elemen ...

javascriptjqueryjquery-uidatepicker