I'm currently working with the Material-UI React library and I am trying to customize the border color of a TextField when it is clicked or in focus.
This is my attempt so far:
const useStyles = makeStyles((theme) => ({
input: {
borderWidth: '1px',
fontWeight: 'bold',
'& .MuiOutlinedInput-input:focused': {
borderColor: 'green',
}
}
}));
However, despite my efforts, the borderColor remains blue. How can I resolve this issue?
If you're looking to change the focus color of the TextField in Material-UI v5, you can do so by utilizing the color props. However, this method has its limitations as it only accepts predefined values. If you wish to use a custom color, you can implement the following code snippet:
'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning'
To set a specific color as the focus color, you can use the provided code snippet:
const CssTextField = styled(TextField, {
shouldForwardProp: (props) => props !== "focusColor"
})((p) => ({
// input label when focused
"& label.Mui-focused": {
color: p.focusColor
},
// focused color for input with variant='standard'
"& .MuiInput-underline:after": {
borderBottomColor: p.focusColor
},
// focused color for input with variant='filled'
"& .MuiFilledInput-underline:after": {
borderBottomColor: p.focusColor
},
// focused color for input with variant='outlined'
"& .MuiOutlinedInput-root": {
"&.Mui-focused fieldset": {
borderColor: p.focusColor
}
}
}));
<CssTextField focusColor='red' />
In Material-UI v4, you can modify the focused color border and label of the TextField using the following approach:
const focusedColor = "orange";
const useStyles = makeStyles({
root: {
// input label when focused
"& label.Mui-focused": {
color: focusedColor
},
// focused color for input with variant='standard'
"& .MuiInput-underline:after": {
borderBottomColor: focusedColor
},
// focused color for input with variant='filled'
"& .MuiFilledInput-underline:after": {
borderBottomColor: focusedColor
},
// focused color for input with variant='outlined'
"& .MuiOutlinedInput-root": {
"&.Mui-focused fieldset": {
borderColor: focusedColor
}
}
}
});
export default function CustomizedInputs() {
const classes = useStyles();
return (
<div style={{ display: "flex", columnGap: 15 }}>
<TextField className={classes.root} variant="outlined" />
<TextField className={classes.root} variant="standard" />
<TextField className={classes.root} variant="filled" />
</div>
);
}
With the sx props of the Mui Textfield, you have the ability to modify the color of the outline when focused by using the following code:
const customStyle = {
"& .MuiOutlinedInput-root": {
"&.Mui-focused fieldset": {
borderColor: "green"
}
}
}
<TextField sx={customStyle} ...(other props)/>
To also change the color of the label when the field is focused, include this additional code in the style variable:
const updatedStyle = {
"& label.Mui-focused": {
color: "green"
},
"& .MuiOutlinedInput-root": {
"&.Mui-focused fieldset": {
borderColor: "green"
}
}
}
Is there a way to set a style property for webpages by targeting addresses that contain /index.php/projecten/ instead of specifying each complete address in the code? Currently, I am using the following code: <ul class="subnavlist" style="display: &l ...
Is there a way to implement the Skeleton effect in a MUI table that only requires sorting and pagination functionalities? I tried using the 'loading' hook with fake data fetching and a 3-second delay, but it doesn't seem to work with DataGri ...
I have encountered an issue when trying to remove an event listener added inside the useEffect hook. The listener is set up to run once after the first rerender, thanks to the empty array passed as the second argument in the useEffect call. I attempted t ...
Hi everyone, this is my first time posting so please go easy on me. I've been struggling to align the buttons at the bottom of my cards to make them look neater. I've tried using flexbox but it doesn't seem to be working. Some people have su ...
Take a look at these two JSFiddles: http://jsfiddle.net/am28dsbz http://jsfiddle.net/am28dsbz/1/ Why is it that the first one shows my text aligned correctly, while the second one displays the first link lower than the second? Stack Overflow requires m ...
I recently started developing a web-app and I'm still learning about web development. I have received a backend response in JSON format with pagination information included: { "count": 16, "next": "http://localhost:800 ...
I am currently developing a straightforward react application with very minimal content. index.js: <div className="App"> <div id="printable-div"> <h1>Generate PDF</h1> <p>Capture a screenshot of ...
Within my Electron application, I have a file named App.ts. It contains the following code snippet: import { ipcRenderer } from 'electron'; // remaining code However, during the app development process, I encountered this error message: Error: ...
It's strange how this issue always occurs when using floats. This is what my div (samle) looks like: <div class="main> <div class="inn_div"> </div> </div> Here is my stylesheet: .main{ width:250px; border:1px ...
Hello fellow programmers on stackoverflow, I am curious if it is feasible to utilize an iframe as a background using CSS? Allow me to elaborate: Currently, I have a div named "lead" on my website. Whenever this div is used in my HTML files, the image ...
I'm venturing into the realm of React Native after being well-versed in React. As a newcomer, I aim to establish a linkage between a cloud server and react-native utilizing websockets as documented. However, the absence of a suitable example has left ...
Currently, I am deep into a project that involves using Next.js. Progress has been steady so far, but there's a hitch with my middleware.ts file. Despite diligently following the Middleware documentation, it seems like the middleware is not triggering ...
Imagine having a contenteditable area with some existing content: <div contenteditable="true"> <p>first paragraph</p> <p> <img width='63' src='https://developer.cdn.mozilla.net/media/img/mdn-logo-s ...
For my next.js project (version 13.4), I was in need of next-intl translation support. I followed the official example provided at The example mentioned to define the following code in the 'en.json' file: "message": "{gender, sele ...
I have a div inside the second table cell that I want to position absolutely right outside the <td>. Currently, the issue is that the <td> elements below are overlapping the div. Eventually, each <td> will contain a div that appears on ro ...
Allow me to outline my current situation: I integrated the react-native-multiple-select-list package into my react-native project by executing: 'yarn add react-native-multiple-select-list': "dependencies": { "react-native-multiple-select ...
Just starting out with jsp and using Glassfish server via netbeans. Struggling to link my jsp file with css and javascripts. Below is the structure of my files: Web Pages --Web-Inf --assets --css --style.css --js --jquery.js ...
Struggling to craft a button using the Form builder. {!! Form::button('<span style="color: {!! $colour[$i] !!}" class..') !!} The specific details of the button don't matter, all I wanted was to adjust the font color to $colour[$id]. Th ...
Looking to add a Stretchy Header Functionality similar to the one shown in this GIF: Currently, on iPhones WebView, my approach involves calling a Scope Function On Scroll (especially focusing on Rubberband Scrolling) and adjusting the Image Height with C ...
Lately, I've primarily relied on the makeStyles hook to style my material-ui components. It's simple, modular, and efficient. In Material-UI v5, they introduced the new sx prop which shows promise, but it comes with a performance tradeoff as men ...