How come the 'color' property in the material-ui TextField functions properly, while the 'borderColor' property does not work as expected?

I am trying to show a TextField in orange color:

<TextField
    id={field_meta.name}
    label={field_meta.title}
    defaultValue={field_meta.value? field_meta.value: ""}
    onChange={this.handleChange}
    margin="normal"
    inputProps={{style: {borderColor: "orange"}}}
    fullWidth
    helperText={"Changes have not been saved yet."}
/>

However, the TextField is displaying in regular colors:

https://i.stack.imgur.com/dU4ml.png

Interestingly, setting the 'color' property does work though:

<TextField
    id={field_meta.name}
    label={field_meta.title}
    defaultValue={field_meta.value? field_meta.value: ""}
    onChange={this.handleChange}
    margin="normal"
    inputProps={{style: {color: "orange"}}}
    fullWidth
    helperText={"Changes have not been saved yet."}
/>

https://i.stack.imgur.com/k5IYH.png

javascriptmaterial-ui

Answer №1

When using the TextField component, you may notice that it initially has no border. To add a border to it, you will need to specify values for the borderWidth and borderStyle properties:

<TextField
    id={field_meta.name}
    label={field_meta.title}
    defaultValue={field_meta.value ? field_meta.value: ""}
    onChange={this.handleChange}
    margin="normal"
    inputProps={{style: {borderWidth: "2px", borderStyle: "solid", borderColor: "orange", color: "orange"}}}
    fullWidth
    helperText={"Changes have not been saved yet."}
/>

Alternatively, you can set these properties all at once:

inputProps={{style: {border: "1px solid orange", color: "orange"}}}

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

Error occurs when attempting to read the 'map' properties of null because the JSON array is double nested

Within my code, I am attempting to access the URLs of two thumbnails in the JSON data below. Currently, I can only retrieve the information from the first array: <>{post.attributes.description}</> However, I am encountering difficulty retrievi ...

javascriptarraysreactjsjsonstrapi

Instructions for selecting all checkboxes in an HTML table with just one click

Developing an aspx page with 3 HTML tables, I am dynamically adding checkboxes to each cell. Additionally, I have a checkbox outside each table. When I check this checkbox, I want all checkboxes in the corresponding HTML table to be checked. However, curre ...

javascriptc#jqueryhtmlasp.net

What is the method to obtain the keycode for a key combination in JavaScript?

$(document).on('keydown', function(event) { performAction(event); event.preventDefault(); }); By using the code above, I am successful in capturing the keycode for a single key press. However, when attempting to use a combin ...

javascript

Having trouble finding the '@material-ui/core/TableContainer' module

Having trouble importing the table container for my React application due to a Material UI version error. I believe updating my version to the latest one will solve this issue. Despite trying npm uninstall and reinstall, the problem persists. Any assista ...

reactjsmaterial-uinpm-install

The json_encode() function returned a JSON that is not valid

In my PHP file (although more complex, even with the simplest code it fails), I have: <?php $salida = array(1,2,3,4,5); echo json_encode($salida); ?> The response received is: [1,2,3,4,5] While this appears valid, it's actually not. When pas ...

javascriptphpjqueryajaxjson

Discover the trick to capturing the back button and dynamically refreshing the webpage with ajax!

I am currently facing an issue with a dynamically updating web page where I need the browser's "back" button to trigger a function for refreshing data instead of navigating back a page. I have managed to trap the "back" button using the following code ...

javascriptjqueryajax

Interact with various contenteditable sections by navigating with the arrow keys

I have a challenge with multiple <p contenteditable="true"></p> elements on my page. I am seeking a solution to enable the use of arrow keys to navigate seamlessly across these separate elements as if they were one cohesive editable element. F ...

javascripthtmlcontenteditable

Ways to prevent other users from clicking or modifying a particular row

I have a data table in my project that will be accessed by multiple users simultaneously. My requirement is that once a row is selected and edited by one user, it should become unclickable for other users who are also viewing the same page or data table. ...

javascriptjqueryajaxdatatable

Google Maps fails to load when triggered by the jQuery show() function

One issue I'm facing is that the Google Map is not loading after the show() function is called in jQuery. Initially, I use display:none to close a division on page load. After some research, I found out that it can be resolved by using google.maps.eve ...

javascriptphpjquerygoogle-maps

The type 'Event' argument cannot be assigned to the 'InfiniteScrollCustomEvent' parameter

I'm facing an issue with Ionic Angular. Here is my movies.page.html: <ion-header> <ion-toolbar color="primary"> <ion-title>Trending Movies</ion-title> </ion-toolbar> </ion-header> <ion-content ...

javascriptangularionic-framework

What should be placed in the form action field if the router.post() method includes a parameter such as :id?

I'm struggling with how to properly submit data to my update form and what needs to be entered in the action field, especially considering the router.post includes an :id parameter. Below is the relevant code snippet: router.post('/gymupdate/:id& ...

javascriptnode.jsformsexpresspost

Troubleshooting the "Request failed with status code 500" error when refreshing a page in a React application

Every time the page is reloaded, an error message pops up saying: Uncaught (in promise) Error: Request failed with status code 500. Here's the code in list.tsx: const [state, setState] = useState([]); const { getRoom } = useRoom(); const fe ...

javascriptreactjstypescriptnext.js

Is there a way to verify HTML binding prior to setting up an AngularJS directive?

On a page where I utilized a custom select-box directive to display the Month, certain arguments are required by the directive: <custom-select-box id="month" model="month" model-required model-name="month" options="month.value ...

javascriptangularjscustom-directive

What is the best way to assign a JavaScript return value to a PHP variable?

Is it possible to capture the return value of a JavaScript function that checks if text boxes are empty and assign it to a PHP variable? I have successfully created a JavaScript function that returns false if any of the text boxes are empty, but now I ne ...

javascriptphphtml

Unpacking the information in React

My goal is to destructure coinsData so I can access the id globally and iterate through the data elsewhere. However, I am facing an issue with TypeScript on exporting CoinProvider: Type '({ children }: { children?: ReactNode; }) => void' is no ...

javascriptreactjstypescript

The framework for structuring web applications using Javascript programming

While I have extensive experience in PHP and C# programming, my knowledge of Javascript is limited. When it comes to server side programming, MVC is my preferred method as it allows me to keep my code well-organized. However, when it comes to writing Java ...

javascript

Ways to enhance focus on childNodes using Javascript

I am currently working on implementing a navigation system using a UL HTML Element. Here's the code I have so far: let htmlUL = <HTMLElement>document.getElementById('autocomplete_ul_' + this.name); if (arg.keyCode == 40) { // down a ...

javascriptangulartypescript

sequentially animating elements using animate css in a choreographed manner

I have created a unique jsfiddle with 20 boxes that I am trying to animate using the Animate.css plugin. The plugin can be found at daneden.me/animate. My goal is to animate each box one after the other in a sequential manner, but I seem to be having trou ...

javascriptjquerycsscss-transitions

"Prisma vs. Supabase: A Comparison of Image Uploading

I am encountering an issue with adding image URLs to the Prisma database. I have successfully uploaded multiple images from an input file to Supabase storage, but when I try to add their URLs to the database, I receive an error regarding property compatibi ...

javascriptreactjstypescriptnext.jsprisma

Utilize a single JavaScript file to handle various views without encountering errors due to undefined functions

My backend editing requires a single JS file. However, I face the challenge of needing different sets of methods for view A and view B — never both at the same time. To streamline this process, I combined all the jQuery functions for both views into one ...

javascriptjquery