Adjusting the outline color of a Material UI Select component in outlined mode to a different color when the dropdown is activated (currently shown as blue)

Is there a way to change the outline color of Material-UI select component outlined variant correctly? I need help changing the default blue color to red, any assistance would be greatly appreciated

Click here for an image reference

Reference code snippet for the component:

<FormControl variant="outlined" fullWidth size={'small'} className={classes.formControl}>
                        <InputLabel id="xAxisDropdown">Select Hardware Platforms</InputLabel>
                        <Select
                           multiple
                           fullWidth
                           labelId="processor"
                           id="processor"
                           value={this.state.selectedProcessors}
                           name={'selectedProcessors'}
                           onChange={this.handleMultiselectChange}
                           label="Select Hardware Platforms"
                           // className={classes.selectBox}
                           classes={{root:classes.selectBox}}
                           renderValue={(selected) => {
                              let names = selected.map(selectedId => {
                                 return this.state.processorList[
                                    this.state.processorList.findIndex(
                                       (processor) => {
                                          return processor.id === selectedId
                                       })
                                    ].nameText
                              })
                              return names.join(', ')
                           }}

                        >
                           {this.state.processorList.map((processor, index) => {
                              return (
                                 <MenuItem key={index} value={processor.id}>
                                    <MainThemeCheckbox
                                       checked={this.state.selectedProcessors.indexOf(processor.id) > -1}
                                    />
                                    <ListItemText primary={processor.selectElement}/>
                                 </MenuItem>
                              )
                           })}
                        </Select>
                     </FormControl>

Answer №1

To change the main color, you can utilize CSS or component styles techniques, but it is recommended to theme your project and select a palette for primary and secondary colors. Check out theming documentation for more information.

You can also use tools like this one to create and test different themes within a single project.

Answer №2

One effective method to accomplish this task is to modify a specific generic color (e.g. Primary, Secondary) within the Theme object and then apply it to the dropdown by enclosing the dropdown in the ThemeProvider element. Make sure to set the theme object with the edited values for proper implementation.

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

Potential Bug Detected in Internet Explorer on Mouseenter Event

I'm facing a challenge with my HTML/CSS code. I have a carousel that includes two li elements positioned absolutely on each side for navigation but they are not displaying correctly in IE versions 7-9 - they appear behind the main element regardless o ...

The NextJS image URL remains constant across various endpoints

Currently experiencing an issue with my Channel Tab where the icon and name of the channel are displayed. The problem is that every time I switch channels, the icon remains the same as the first channel I clicked on. PREVIEW This is the code I am current ...

Vue 3 has a known issue where scoped styles do not get applied correctly within the content of a <slot> element

Utilizing the Oruga and Storybook libraries for creating Vue 3 components. The code in the Vue file looks like this: <template> <o-radio v-bind="$props" v-model="model"> <slot /> </o-radio> </template ...

Tips for increasing a variable by one with each button click?

I have a simple JavaScript function called plusOne() that is designed to increment a variable by 1 each time a button is clicked, and then display the updated value on a webpage. However, I'm encountering an issue where the addition only occurs once. ...

Implementing Material UI with React on Rails

Recently, I attempted to integrate Material UI into my React On Rails Project. Everything seemed to be working fine, except for the fact that Module RaisedButton is causing some trouble, Each time I try to import RaisedButton, I encounter an error messag ...

How to switch around div elements using CSS

There are two unordered list items in a container div and one swap button. When the swap button is clicked, the order of items needs to change. This functionality can be achieved using the following swap function. var ints = [ "1", "2", "3", "4" ], ...

I possess a tool for generating QR codes and am curious about how I can implement it for direct download within a React environment

After creating a QR code generator, I encountered an issue with the download functionality. Currently, upon pressing the download button, it redirects me to another website where users have to right click and choose "save image as" to download the generate ...

Incorporate pictures from the popup onto the main page

I have developed a basic PHP image editor script where users can select images from galleries and merge them together. However, I am facing an issue: The galleries open in a popup while the editor area is on the parent page. I am looking for a JavaScript ...

How can CSS be used to print multiple pages without any margins? And what is causing this slight extra height in the output

Check out the Live Demo here, apologies for the messy CSS as I have been experimenting with different styles. I am currently attempting to print PDF files using the browser's print dialog. Each file consists of 4 pages in the DIN lang format with an ...

JavaScript can be used to create dynamic frames within a

Can anyone help identify the issue in my code? frame 1 <script type="text/javascript"> var Clicks = 0 ; function AddClick(){ Clicks = Clicks + 1; document.getElementById('CountedClicks').innerHTML = Clicks ; } localStorage.setItem(' ...

What is the best way to update a state using the onChange event in React?

When working on a component for the frontend of my CRUD application using React, I created a form component for updating records in the database. Initially, I declared a state using useState without any initial values. const [data, setData] = useState({}) ...

Switching from AngularJS to vanilla JavaScript or integrating AngularJS and Flask on a single server

It is common knowledge that angular has the ability to create a project and convert it into pure HTML, CSS, and js code. Similarly, I am looking to do the same for my AngularJS application. When I execute the app using npm start it works perfectly fine. My ...

Node.js routing currently lacks the ability to easily verify the presence of a JWT token for every route

I have a node application where, upon routing to ('/login') with valid credentials, I generate a JWT token with an expiry time and direct the user to the next page. If the user tries to access any other route directly (e.g., '/home') af ...

Customizing Material-UI elements in React using CSS styling

My goal is to style all the <Chip> elements within a <Grid> that has the class .table-header, but they are not changing their style (I have a <p> that should be colored in red and it works). Why does the styling work for the <p> ele ...

There seems to be an issue with AJAX file uploading functionality in Django

I'm facing an issue with uploading files using the onchange event and AJAX. I am only able to get the file path on the backend, not the actual file itself. My goal is to modify the code so that when a PDF file is selected, it automatically gets upload ...

Storing user data in node.js using the express-sessionTo save user data in

Using express and express-session with mysql on nodeJS has been successful for me. I managed to set up a cookie and session as well. Take a look at my code: app.use(cookieParser('3CCC4ACD-6ED1-4844-9217-82131BDCB239')); session({resave: true, s ...

CSS code for creating thumbnail images that enlarge when hovered over

I currently have a series of thumbnails in a row (within container elements) set to float left. These thumbnails are resized to fit neatly within the row. <style type="text/css"> .thumbnails{ float:left; position:relative; } ...

Using jQuery to create clickable URLs within a rollover div

I am looking to have the div appear on a mouse over effect in the following code. Is there a way for me to input a url based on the data that is passed to it? Anchorage: ["Anchorage", "(555)555-5555"], (This represents the data being posted) AtlanticCit ...

Implementing dynamic attribute id addition to select option

Here's the code snippet I'm currently working with: Included HTML <select id="drop_opts"> <option>1<option> <option>2<option> <option>3<option> </select> ...

Changing the key name for each element in an array using ng-repeat: a guide

In my current project, I have an array of objects that I am displaying in a table using the ng-repeat directive. <table> <thead> <tr> <th ng-repeat="col in columnHeaders">{{col}}</th> //['Name&apo ...