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

What could be causing the discrepancy in results between the first and second methods?

Implementing Weather Icons: const getWeatherIcon = (iconParameter) => { const icon = `https://openweathermap.org/img/wn/${iconParameter}@2x.png` return <img src={icon} alt={iconParameter} /> } <div className="weathericon"> ...

javascripthtmlreactjs

Using Gulp Filter in Conjunction with Source Maps

My initial query was similar to this one here, but it led me to delve deeper into research and explore a new approach. Essentially, I am attempting to consolidate all my .js and .coffee files within a single gulp.src() object and execute relevant tasks ba ...

javascriptcoffeescriptnpmgulp

Is it possible for Javascript, AJAX, or JQuery to determine if a form has been manually inputted into

My goal is to change the contents of a form field and submit the form through the console. However, when I use either jQuery or JavaScript to modify the field and submit it, the page only recognizes values that were manually typed in. In the code snippet ...

javascriptjqueryajaxformspost

Clicking the button will cause the React component to close itself automatically

Is there a way to make a React component self-close when a button within the component is clicked? Take a look at this code snippet: import React from 'react'; import PropTypes from 'prop-types'; const MyReactComponent = (props) => ...

javascriptreactjs

Using a Javascript plugin in Laravel with Vue by importing it into the project

Currently, I am in the process of creating a Vue component by utilizing the functionalities provided by the JavaScript plugin known as Cropper JS. The application is developed using Laravel 5.6. Initially, I installed Cropper JS via NPM: npm install cropp ...

javascriptvue.jslaravel-5.5laravel-5.6

Having trouble with NextJS not updating state upon button click?

I am encountering a problem with my NextJS application. I am attempting to show a loading spinner on a button when it is used for user login. I have tried setting the `loading` state to true before calling the login function and then reverting it to fals ...

javascriptreactjsnext.js

Launch a PowerPoint presentation in a separate tab on your web browser

If you have a link that leads to a .pdf file, it will open in a new tab like this: <a target="_blank" href="http://somePDF.pdf">Download</a> But what about a Powerpoint file, such as a .ppt? Is there a way to make it open in a new browser tab ...

javascriptjqueryhtmlpowerpoint

How to update an Array<Object> State in ReactJS without causing mutation

In my program, I store an array of objects containing meta information. This is the format for each object. this.state.slotData [{ availability: boolean, id: number, car: { RegistrationNumber : string, ...

javascriptreactjstypescriptimmutability

Which framework should be used: client-side or server-side?

I am working on a project similar to craiglist, where users can post announcements for everyday items like cars and flats. I have already developed a significant portion of the backend using a RESTful API in three-tier architecture with Java, connecting to ...

javascriptangularjsweb-servicesember.jsframeworks

What location is optimal for storing ng-templates within an Angular/Django single-page application?

My project involves using Django and AngularJS to create a single-page application. I have numerous ng-templates structured like this: <script type="text/ng-template" id="item.html"> // content </script> Currently, all these templates are l ...

javascriptpythonangularjsdjangoheroku

Tips for updating the corresponding nav link in CSS when transitioning between pages

In order to highlight the current page in the navigation menu, one method is to use an active attribute on the nav-link of the respective page: <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link navLink ...

javascripthtmlcssdombootstrap-4

How to Safely Merge Data from Several Excel Files into a Single Worksheet in Google Sheets using ExcelJS without Overwriting Existing Data

Just to clarify - I'm not a seasoned developer, I'm still a newbie at this. My current challenge involves transferring data from multiple Excel files located in one folder to a single worksheet in Google Sheets. To do this, I am utilizing excelJ ...

javascriptnode.jsexcelgoogle-sheets-apiexceljs

What is the process for editing a JSON file and preserving the modifications?

I have a JSON file with a key (food_image) and I am looking to dynamically assign the index value in a loop to it, such as food_image0, food_image1 ... food_image{loop index}. After that, I aim to save this modified JSON file under a new name. All values ...

javascriptpythonjson

A guide on incorporating a customized Google map into your website

Recently, I utilized the Google Map editing service from this site: https://developers.google.com/maps/documentation/javascript/styling This link provided me with two things: 1. A JSON code 2. The Google API link However, I am unsure about how to incorpo ...

javascripthtmljsongoogle-mapsgoogle-maps-api-3

Adjusting the height of a textarea with javascript

I am trying to reset the contents and height of an auto resizing textarea element. My attempts so far include: document.getElementById('textarea').value = ''; As well as: document.getElementById('textarea').attribute(&apos ...

javascripttextarea

What approach does JavaScript take when encountering a value that is undefined?

Having recently delved into JavaScript and exploring a book, I came across an interesting example in the recursive chapter: function findSolution(target) { function find(current, history) { if (current == target) return history; else if (c ...

javascriptloops

Generate HTML content based on the permissions from a REST API

I have a frontend that renders based on user permissions from a REST API. These permissions could include deleting users, creating users, adding users to workflows, and more. Most of these permissions are managed by an administrator. So my question is: H ...

javascripthtmlrestapivue.js

"An ActionResult is received as null when the model is passed as an

Has anyone encountered a situation where the model is null when passed to the controller? I inserted an alert in the ajax call to verify the value and it seemed correct, but upon debugging on the first line of the controller's ActionResult, it shows a ...

javascriptc#ajaxasp.net-mvc

Identify and automatically switch to the mobile site following a selection

Seeking a way to incorporate a redirect on my Joomla site that leads users to a mobile-friendly HTML5 app. After much thought, I've put together the following script: <script type="text/javascript> <!-- if (screen.width <= 800) { ...

javascripthtmlmobiledetect

AngularJS is not properly clearing the datepicker

Upon submitting the form, I have managed to reset all input fields to blank except for the datepicker which still retains the previously selected date. How can I clear that as well? Snippet of HTML: <div> <form name="profileform" role="fo ...

javascriptjqueryhtmlangularjsdatepicker