Modify the default border color of the outlined text field

I am seeking to customize the border color of an outlined textfield from gray to a deeper blue shade.

              <TextField
            variant={"outlined"}
            placeholder={t('landing_page.code.placeholder')}
            onChange={this.onCodeChanged}
            value={code}
            fullWidth={true}
            className={classes.codeInput}
            error={code ? code.length < 10 : false}
          />

Here is the CSS class for codeInput: 

  codeInput: {
     marginTop: theme.spacing.unit,
  },

I have attempted to change the color through the theme, but it has not been successful:

  overrides: {
    MuiOutlinedInput: {
      root: {
        borderColor: "#2b303e"
      },
      notchedOutline: {
        borderRadius: "0",
        borderWidth: "2px",
        borderColor: "#2b303e"
      },
    },
  }

Despite my efforts, the border remains gray as depicted in the accompanying image. It seems that certain CSS rules are causing this issue and I am unsure how to resolve it.

.MuiOutlinedInput-root-148 .MuiOutlinedInput-notchedOutline-155 {
    border-color: rgba(0, 0, 0, 0.23);
}

https://i.sstatic.net/bOFBM.png

cssreactjsmaterial-ui

Answer №1

Start by defining a custom CSS class:

// styles.css
.customBorder {
}

Specify the border properties you want and use !important; to override other styles.

// styles.css
.customBorder{
    border-radius: 0px!important;
    border: 2px solid #2b303e!important;
}

Apply this class to your component:

// JS / React Component
<TextField
    variant={"outlined"}
    placeholder={t('landing_page.code.placeholder')}
    onChange={this.onCodeChanged}
    value={code}
    fullWidth={true}
    className={`customBorder ${classes.codeInput}`}
/>

Create an additional style for errors:

// styles.css
.customBorder{
    border-radius: 0px!important;
    border: 2px solid #2b303e!important;
}
// Red border for error state
.customBorder-error {
   border-radius: 0px!important;
   border: 2px solid red!important;
}

Dynamically switch between regular and error styles based on a condition condition ? true : false

// JS / Component

<TextField
    variant={"outlined"}
    placeholder={t('landing_page.code.placeholder')}
    onChange={this.onCodeChanged}
    value={code}
    fullWidth={true}
    className={code.length < 10 ? `customBorder-error ${classes.codeInput}` : `customBorder ${classes.codeInput}}
/>

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

"Creating a cohesive design: Using CSS to ensure the navigation background complements

I am working on a project with a horizontal navbar that I want to stay fixed while scrolling. The main window has different colored divs as you scroll down, and I would like the navbar to match the image of the main div while scrolling, creating a looping ...

javascriptjqueryhtmlcss

What makes my website image unresponsive?

As a newcomer to the world of programming, I recently embarked on the journey of learning about it just last month. Right now, I am fully immersed in creating my new website for a school project. However, I seem to be facing an issue with making the image ...

jqueryhtmlcssiosbootstrap-4

Is there a way to access the font characteristics of a website?

I'm currently in the process of customizing my WordPress theme and I'm looking to adjust the font sizes for certain elements such as pagination. However, I'm finding the style.css file to be quite convoluted and I'm having trouble ident ...

csswordpress

Encountering a Component Error while Building in React Native

I am attempting to develop a react native component that essentially refreshes the default screen through a component. However, I am encountering an issue: Cannot locate variable: Component Login.js: 'use strict'; var React = require(& ...

javascriptandroidmobilereactjsreact-native

React throws an error message when the update depth surpasses its maximum limit

I am facing an issue with my container setup where the child container is handling states and receiving props from the parent. The problem arises when I have two select statements in which onChange sets the state in the child container, causing it to re-re ...

javascriptreactjsmaterial-uijsx

Rearrange and place items at the dropped location

I am looking to create a drag-and-drop feature for moving items from a list of products to an empty container. Upon completion, I need to save the location and the selected items in a database so that I can recall this layout later. However, I have encoun ...

javascriptjqueryhtmlcss

The error message "TypeError: 'results.length' is not an object" occurred within the Search Component during evaluation

Having trouble with a search feature that is supposed to display results from /api/nextSearch.tsx. However, whenever I input a query into the search box, I keep getting the error message TypeError: undefined is not an object (evaluating 'results.lengt ...

reactjstypescriptsearchnext.js

What could be causing my media query to not function properly?

I've been experimenting with some basic media queries but am encountering an issue with the div element that has the class "container." Whenever I adjust the screen size to be between 992px and 1200px, the div disappears from the page. It's perpl ...

cssmedia-queries

Attempting to set up a react application by running this command

npm install -g create-react-app I encountered an error message that looked like this: npm ERR! code EPERM npm ERR! syscall mkdir npm ERR! path C:\Windows\system32\node_modules npm ERR! errno -4048 npm ERR! Error: EPERM: operation not p ...

node.jsreactjsnpmnpm-install

Difficulty displaying images in remotion/reactjs

Utilizing the remotion library in reactjs to craft video content has been quite the journey. Despite following the instructions on importing and using assets, I'm encountering an issue where images and CSS are not working as expected. The documentatio ...

javascriptnode.jsreactjs

Tips for dynamically styling a Styled Component with all the CSS housed in an external file

My goal is to dynamically render a Styled Component. In the past, it was simple because all styling was contained within the component itself. However, I now strive to maintain a separation of concerns by storing the CSS in an external file. While this app ...

javascripthtmlcssreactjsstyled-components

What factors does Google Web Fonts consider when determining which font version to serve to my browser?

I recently came across information stating that "Google Web Fonts does its best to ensure proper versions are served, but sometimes discrepancies can occur between browsers and operating systems." My intention is to incorporate the following CSS code: fon ...

htmlcsswebfontsgoogle-webfonts

How does shinyFeedback take precedence over custom CSS styles?

Objective: Within my application, users are required to upload a file in .csv format. If they attempt to upload a file that is not in the correct format, an alert message (showFeedbackWarning()) should be displayed near the fileInput() element. Once the ...

cssrshiny

Using a prop in Reactjs to access an array element by its index

Is it possible to pass a prop that consists of a number and use it as an array index to retrieve the image source from an array? In my current state, I have: imgno: [1] (I'm not entirely sure if this is correct) imgno: 1 I am passing this val ...

reactjs

Changing the line height causes the bullet position to shift downwards

Here is a bullet list: <ol className="graphkregular mt-2" style={{ display: "listItem" }}> <li> <small>{popupData.content[0].split("\n").join("\n")}< ...

javascriptcssreactjs

Encountering a Bad Request error when making a POST request with Axios and dealing with CORS in a Django and

I encountered a successful post request when using Postman to the URL http://localhost:8000/api/auth/users/. However, attempting the same request on my React front end resulted in a 400 (bad request error) along with an Uncaught Promise Error stating "Requ ...

javascriptreactjsaxiosdjango-cors-headers

It is not possible to export Next.js pages that utilize getServerSideProps

Recently, I ventured into learning and working with next.js. I built a simple cpanel page that should fetch data every time the page is requested, similar to React's useEffect hook. To achieve this, I utilized getServerSideProps which worked perfectly ...

reactjsnext.jsserver-side-rendering

Guide on how to use dropdown menus to choose rows and columns and generate tables with the help of bootstrap and css

Is there a way to achieve functionality similar to draw.io where users can select rows and columns to insert a table? Any ideas on what this feature is called or how to implement it? https://i.sstatic.net/23cNY.png ...

htmlcssvue.jsbootstrap-4draw.io

The animated loading image is taking an eternity to actually load

My website is loaded with heavy front-end features and I'm using a loading gif to help with the loading process. However, I've noticed that in Safari, there is a delay before the gif loads after the background does, which takes away from the inte ...

javascriptjqueryhtmlcssloading

Unable to accommodate data within the fixed width confines of the GridView cell

I am having a column in my table with lengthy text that requires scrolling to see the end. Is there a way to adjust the content to fit within a fixed-width cell? Here is the UI setup for the GridView: <asp:GridView ID="GridView1" runat="server" OnPag ...

asp.netcsssqlgridview