Tips for customizing the focus style of a Text Field in Material-UI

My current Search box design is represented in the following image: https://i.sstatic.net/VuKIp.png

I am looking for ways to customize the background color, border, and icon of the search box when it is focused. Additionally, I would like to know how to modify its appearance when it is not in focus.

Here is my existing code snippet:

<TextField
    className={classes.searchBarStyle}
    placeholder="Search"
    type="search"
    margin="normal"
    variant="outlined"
    InputProps={{
        startAdornment: (
            <InputAdornment position="start">
                <Search />
            </InputAdornment>
        ),
        classes: {input: classes.input}
    }}
/>

Below is the CSS related to the search bar styling:

searchBarStyle: {
    height: "40px",
    width: "200px",
    margin: "0 0 0 0",
    float: "right",
},
input: {
    color: "white",
    textDecoration: "none",
    '&::placeholder': {
        color: 'white',
        fontWeight: "400"
    }
}
htmlcssreactjsmaterial-ui

Answer №1

I encountered the same issue myself but managed to find a solution after stumbling upon your question. I believe it's never too late to provide an answer.

You can utilize the makeStyles function from @material-ui/core/styles library. For instance, I defined border-color and border-radius for default state, as well as border-color and border-width for focus state. Additionally, I changed the icon to PersonAddIcon.

import { makeStyles } from '@material-ui/core/styles';
import { TextField } from '@material-ui/core/TextField';
import PersonAddIcon from '@material-ui/icons/PersonAdd';

const useStyles = makeStyles(theme => ({
    searchBarStyle: {
        height: "40px",
        width: "200px",
        margin: "0 0 0 0",
        float: "right",
        "& .MuiOutlinedInput-root": {
            "& fieldset": { 
                borderRadius: "20px",
                borderColor: "#000fff"
            },
        "&.Mui-focused fieldset": {
            borderColor: "#C52328"
            borderWidth: "2px"
        }
    }
}
}))

const CustomTextField = () => {
const classes = useStyles()
return <TextField
    className={classes.searchBarStyle}
    placeholder="Search"
    type="search"
    margin="normal"
    variant="outlined"
    InputProps={{
        startAdornment: (
            <InputAdornment position="start">
                <PersonAddIcon />
            </InputAdornment>
        )
    }}
/>
}

export default CustomTextField;

You can inspect all the modified classNames in the Browser's Inspect mode.

If you require further information, please refer to this link (Check at Customized Inputs)

TextField React component- Material-UI

I trust that this explanation will be valuable to you.

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

Is there a way to stop objects in a particular list from being dragged into another nested ul using jquery sortable?

I am faced with a challenge regarding nested lists, specifically when it comes to preventing parent-parent list items from dropping into an inner <div> within an <li> <div> that already contains its own <ul> <li> list. Additio ...

jquerycsshtml

What steps should I take to ensure that my NodeJS application starts successfully within a Docker environment?

I am currently working with a NodeJS (version 8) application that I am attempting to run in Docker locally. After building the app, when using docker-compose up, I encounter the following error: app_1 | /app/backend/node_modules/.bin/node: 1: ...

node.jsreactjsdocker

What is the best way to create an answer label box that validates your response?

I am looking to design a question box label that resembles a search box. In this unique setup, users will have the option to input their answer into the question label. For example, if the user types 'kfuffle' as the answer, they will automatical ...

javascripthtml

Is there a way to alter the text color upon touching it?

I'm attempting to modify the background color of a button and also change the text color inside the button. While I was successful in changing the button's color, the text color remained the same. Even after adding a hover effect to the text, the ...

cssreactjstailwind-css

The replaceWith function in jQuery does not support <script> elements

I am faced with a situation where my AJAX response includes HTML code, including <script> elements. My goal is to replace an existing element with this HTML content. However, when I attempt to do so using the following code: $(element).replaceWith( ...

jqueryhtmlajaxreplacewith

Understanding Arrays in Angular JSIn this article, we

I am new to working with Angular JS. Currently, I am populating an array and attempting to showcase its contents on the HTML page using ng-repeat. $scope.groupedMedia = []; // Elements are being added through a for loop. $scope.groupedMedia[year].push(r ...

javascripthtmlarraysangularjs

Is there a way to alter the color of the button?

Currently, I have set the onClick function to toggle a state when a button is clicked. Now, my goal is to change the color of the button every time it is clicked. <Button className={classes.button_reset} onClick={() => set ...

reactjsmaterial-ui

Executing a JavaScript function across multiple elements: A step-by-step guide

I recently came across this code snippet on w3schools.com: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {box-sizing: border-box} body {font-family: Verdana, ...

javascripthtmlcssimagegallery

Using React to map through a nested array within an object

In an attempt to extract the nested array "records", my current approach shows the array in the react console, but with an error. I will try to be brief while still providing necessary details. Upon encountering an error, there are 3 lines specifically po ...

javascriptjsonreactjsecmascript-6

Exploring the integration of mixins from .scss files within node_modules into our .tsx or .jsx files for enhanced styling

I am currently facing a challenge with importing a .scss file from one of the installed node_modules into my .tsx file. The scss file contains a mixin named @mixin make-embedded-control($className: embedded-control){.....} which has all the necessary css ...

cssreactjssassscss-mixins

extracting the identifiers and class names from an HTML document

I have successfully extracted tags from an HTML file using getElementByTagName. However, I am also interested in parsing the IDs and class names within the same HTML file. This is my current approach: $html = new DOMDocument(); $html->loadHTML ...

phphtmlcakephpdom

Affix Object to Bottom of Stationary Element

I have a header element that I want to remain fixed while scrolling. The scrollable area should be positioned directly after the fixed header, without using position: absolute and removing it from the document flow. To better illustrate the issue, I' ...

htmlcssflexbox

IFrame transparency setting not recognized

I am encountering an issue with transparency when adding an iframe to a webpage. I have set the allowTransparency attribute of the iFrame to true, but upon inspecting the element using Internet Explorer's F12 Developer Tools, I noticed that although t ...

htmliframe

Update the image and heading simultaneously when hovering over the parent div

I am looking to enhance the user experience on my website by changing the color of headings and images when a user hovers over a specific section. Currently, I have been able to achieve this effect individually for each element but not simultaneously. Any ...

javascriptjquerycsshover

Issue with function not returning a list of radio buttons in ReactJS using ReactBootstrap

I'm currently developing a dashboard that retrieves data from Acuity Scheduling. I'm creating a form and utilizing a function to generate a list of radio buttons - the following array showcases this process. Due to the time required to fetch data ...

arraysreactjssettimeoutreact-bootstrap

Arranging hierarchical data in JavaScript

After populating the hierarchy data, it is structured as follows: Here is a screenshot: I am looking to sort this data. Currently, I have a flat data object for rendering purposes. For example, my rendering object looks like this: renderedobjects=[ {1,. ...

javascriptjqueryhtmlarrayssorting

Guide to increasing the scrollbar size in Material-UI

I am currently working on a touch screen application for a 7" Raspberry Pi using React and Material-UI. One of the challenges I'm facing is with a List element from @material-ui/core which has more items than can fit on the screen at once, causing a s ...

reactjssizescrollbarmaterial-ui

Navigating with React Router after submitting a form

I'm experiencing difficulty with the navigation. The React Router works correctly when I manually type in the URL or use Links. const navigate = useNavigate(); function handleForm() { console.log("Form Submitted"); navigate("/"); } < ...

reactjsreact-routerreact-router-dom

Can Spring Boot and React (SPA, not server-side render) be configured to utilize Session Authentication instead of JWT?

Many online tutorials demonstrate the combination of React JS within a Spring Project, resulting in server-side rendering similar to thymeleaf. However, in my specific project setup, I have chosen to separate spring boot (REST API Backend) and ReactJS (SPA ...

reactjsspringspring-bootsessionsingle-page-application

Nextjs doesn't seem to support redirects on netlify

After closely following the documentation, I made sure to include the following code in my next.config.js file: module.exports = { reactStrictMode: true, async redirects() { return [ { source: "/", destination: &quo ...

node.jsreactjsnext.jsnetlify