Tips for creating a custom design for Material UI TextField using Modular CSS

I'm having trouble updating the border color of the Material UI TextField component using Modular CSS. Despite my efforts, I can't seem to get it to work.

CSS (In Styles.module.css):

.formInput {
    font-size: 18px !important;
    font-family: Roboto, serif !important;
    color: #057FA8 !important;
    border-color: #057FA8 !important;
}

.formInput:hover {
    border-color: #057FA8 !important;
}

JS:

import styles from './Styles.module.css';

...

<TextField id="name" name="name" label="Name" className={styles.formInput} value={formik.values.name} onChange={formik.handleChange}
                           error={Boolean(formik.errors.name)} helperText={formik.errors.name}
                           onBlur={(e) => {
                               e.preventDefault();
                               formik.validateField('name');
                               formik.setFieldTouched('name');
                           }}
                           margin='normal'
                           fullWidth
                           variant="outlined"
                />

Any assistance with this issue would be greatly valued.

cssreactjsmaterial-ui

Answer №1

In the latest version of Material UI, V4, there is a feature called the classes property on TextField that allows you to customize the internal components.

For example, you can try modifying the styles as shown below:

/* LABEL STYLES */
.formInput label.Mui-focused
{
    color: #057FA8 !important;
    font-size: 18px;
    font-family: Roboto, serif
}

/* INPUT FONT STYLES (on wrapper element not input directly) */
.formInput .MuiOutlinedInput-root
{
    font-size: 18px;
    font-family: Roboto, serif
}

/* BORDER COLOR */
.formInput .MuiOutlinedInput-root fieldset
{
    border-color: #057FA8;
}

/* BORDER COLOR ON HOVER */
.formInput .MuiOutlinedInput-root:hover fieldset
{
    border-color: #057FA8
}

/* BORDER COLOR ON FOCUS*/
.formInput .MuiOutlinedInput-root.Mui-focused fieldset
{
    border-color: #057FA8
}

Additionally, in your code you can import styles from a separate module and apply them to your TextField component like this:

import styles from './Styles.module.css';

const classes = { root: styles.formInput };

const ExampleComponent = () => {
    return (
        <TextField 
            id="name" 
            name="name" 
            label="Name" 
            classes={classes}
            margin='normal'
            fullWidth
            variant="outlined"
        />
    )
}

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

Create a fully responsive introduction page with three columns using Bootstrap, ensuring that the height of the

Currently, I am in the process of designing a website for a restaurant, hotel, and vineyard. My goal is to create three separate websites that are linked through one introductory page. The concept for the intro page involves three columns displayed side b ...

htmlcsstwitter-bootstrap-3responsive-design

Encountering a "Module not found" error while attempting to access user session in getServerSideProps. The specific error is: "Error: Can't resolve 'dns'"

Currently, I am utilizing the next-auth module in my project. By integrating the mongodb adapter, users are automatically created in the database with basic information such as name, email, and avatar. However, I require additional data to be added on top ...

reactjsmongodbnext.jsserver-side-renderingnext-auth

Contrasting Viewport on Android in Landscape and Portrait Modes

I've been working on a mobile site and in order to test it, I've set up different emulators for Android and used an iPhone emulator as well. The issue I am facing is that when I call window.innerWidth upon orientation change on the iPhone, the vi ...

javascriptandroidiphonehtmlcss

Adjust Image Width to Full - Bootstrap

I am having trouble creating a full-width header using Bootstrap v5. Despite searching the site, I have not been able to find a solution that works for me. *{ box-sizing: border-box; font-size: 16px; } .no-padding { padding-l ...

htmlcsstwitter-bootstrap

Display the content alongside the UI Bootstrap tabset tabs

Just starting out with bootstrap and looking to implement the vertical tabset for my project. Here's a basic outline of what I have in mind: <tabset vertical="true" type="tabs"> <tab heading="Vertical 1">Vertical content 1</tab> & ...

cssangularjstwitter-bootstrapuser-interface

Delete the option to alter button in the Jasny file input tool

I recently incorporated the Jasny Fileinput Widget into my existing form. However, I noticed that when I select a new file, it displays two buttons: Change and Remove. In this case, I believe the Change button is unnecessary and would like to remove it com ...

phpjquerycssfile-uploadjasny-bootstrap

Is it necessary to synchronize redux across different browser tabs?

Currently in the process of developing an ERP web application that encompasses various table data and information for logged-in users within the redux state. I'm contemplating whether it's necessary to synchronize the redux state across multiple ...

reactjsredux

Issue with MUI Select custom MenuItem functionality not functioning as expected

Having an issue with MUI's MenuItem in conjunction with Select and rendering it within a separate component. Check out the codesandbox for reference. The setup is as follows: import { Select } from "@material-ui/core"; import CustomMenuIte ...

reactjstypescriptmaterial-uireact-forwardref

How can I utilize React to pull information from the Google Taxonomy API?

Seeking assistance with React development, as I am a beginner and looking to retrieve data from this URL and organize it into a tree structure. I not only want to fetch the data but also display it in a tree format. My current code successfully retrieves t ...

javascriptreactjs

How can I load only specific images on a webpage using HTML?

I attempted to implement an image filter for my website by using the code below: <script> function myFunction() { // Initialize variables var input, filter, ul, li, a, i; input = document.getElementById('myInput'); filter = input.value.toU ...

javascripthtmlcss

Is there a way to hide the navbar in React-Admin?

I am currently facing some difficulties in removing the default navbar from react-admin. https://i.sstatic.net/PrOy1.png The issue lies in the fact that my original Navbar is positioned at the bottom of the react-admin navbar, as shown when inspected and ...

reactjsreact-reduxmaterial-uinext.jsreact-admin

Persistence with Redux is essential for saving state in your application. Here's a

Hey everyone, I've been utilizing redux-persist for some time and it's truly an amazing tool. However, the issue I'm facing is that it persist all of my states (reducers). I was wondering if there is a method to select which states should be ...

reactjsreact-reduxredux-persist

Version 5.1.3 of Bootstrap now combines the $colors with the $theme-colors map for enhanced customization

I am attempting to introduce some color variables like "blue", "indigo" ... to the $theme-colors map. It appears to be functioning, but after compiling, it seems duplicated in the :root selector as shown in the image below. Here's ...

csstwitter-bootstrapsassbootstrap-5

Tips for passing arguments to event handlers in React JS

While going through the React JS documentation, I came across the concept of "Lifting State Up" and I have some confusion about it. You can check out the codepen sample here: https://codepen.io/valscion/pen/jBNjja?editors=0010 In the TemperatureInput comp ...

javascriptreactjs

Can a unique class name generator be implemented for styled components in MaterialUI?

Currently, I am working on a create-react-app project that uses MaterialUI. In an attempt to switch from JSS to Styled Components, everything is functioning properly but the generated class names are not easily understandable. I came across information su ...

reactjsmaterial-uistyled-componentsjss

What is the sequence of execution for code within each component in ReactJS?

When I made an API call in componentDidMount for the component structure below, I encountered an issue where the line console.log("SAS",this.props.courses) is printed twice. The first time it is empty and the second time it shows the returned values from t ...

ajaxreactjsreact-router

Wait patiently for an element to disappear

I am facing a challenge in writing a test that ensures an element will not be visible once a permissions API promise is resolved. Although I followed the guidelines mentioned in the documentation, the test seems to only work when the element is present in ...

reactjsunit-testingjestjsreact-testing-library

Mastering the Art of Customizing Styling in Ant Design

I'm currently working with a table from Ant Design, but I'm facing an issue where the padding or margin applied by the Ant Design CSS is preventing the table from expanding on the left side. The table has an inline CSS of table layout: auto which ...

cssreactjsant-design-pro

Enhance the current bootstrap sidebar by making it collapsible

My project is built in bootstrap and features a top navigation bar along with a sidebar. I would like to make the sidebar collapsible, similar to this example: The only challenge is that the sidebar in my project is positioned on the left side of the pag ...

javascriptjqueryhtmlcsstwitter-bootstrap

Animation of CSS height when image/icon is hovered over

Having an issue with my icon when hovering. I am trying to change the img src on hover. Here is the code I currently have: #aks { width: 0px; max-height: 0; transition: max-height 0.15s ease-out; overflow: hidden; background: url("https://img. ...

htmlcsscss-animations