Customizing the color scheme of specific components using Material UI inline styling

I am currently customizing my TextFields from Material-UI. My background is black and I want both the textField border and text to be white. Here's the relevant part of my code:

render() {
    const styles = {
      width: {
        width: '90%',
        margin: '5px',
        padding: '5px',
        textColor: '#ffffff',
        hintColor: '#ffffff',
        floatingLabelColor: '#ffffff',
        disabledTextColor: '#673ab7',
        focusColor: '#c2185b',
        borderColor: '#ffffff'
      },
      button: {
        margin: '15px',
        padding: '20px',
        width: '60%'
      }
    };

<TextField
              className="classes.textField"
              label="Name Your Vice"
              type="text"
              name="vice"
              value={this.props.vice}
              margin="normal"
              variant="outlined"
              style={styles.width}
              onChange={this.props.handleInputChange}
            />

What else do I need to include in order to achieve this desired styling effect?

Thank you

javascriptmaterial-ui

Answer №1

TextField serves as a convenient abstraction for various components, as outlined in the official documentation:

Advanced Configuration

It's crucial to note that the text field simplifies the usage of the following underlying elements:

  • FormControl
  • InputLabel
  • List item
  • Input
  • FormHelperText

If you want to customize styles, focus on the Input component.

Here's an example of how your code might appear:

const styles = {
  input: {
    backgroundColor: 'red',
  },
}

< TextField InputProps = {{ style: styles.input }} />

Answer №2

After struggling with the complexity of Material UI's customization process, I switched to Materialize - a user-friendly alternative that made it easy for me to personalize my components without having to dig deep into the code.

Answer №3

In order to customize the border and background color of a TextField component with the "outlined" variant, you will need to specifically target the fieldset element.

Here is an example of how you can achieve this:

const customStyles = {
  textField: {
    [`& fieldset`]: {
      border:"1px solid #fff",
      backgroundColor: "#fff"
    }
};

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

The collapsible section expands upon loading the page

Trying to implement Disqus as a plugin on my test webpage, I created a collapsible section with a "Show comments" button. The idea was to hide the plugin by default and reveal it only when users click on "Show comments". Despite using the w3schools example ...

javascripthtmlcsscollapsable

The ajax method for loading an xml file results in displaying the undefined message

When attempting to fetch content from an xml file using ajax, the page initially displays "undefined". However, upon refreshing the page, the content loads successfully. Take a look at my code snippet below: $.ajax({ type: "GET", url: "xm ...

javascriptjqueryhtmlxmlajax

Retrieve the scope object using angular.element and the $ID parameter

In order to transfer data from an angular application to scripts that operate outside of angular, I am seeking a solution since I cannot modify the code of the angular app. By utilizing Angular Batarang and NG-Inspector extensions in Chrome, I have identi ...

javascripthtmlangularjsangularjs-scope

The color of the progress bar in JS is not displaying properly

My work involves using jQuery to manipulate progress bars. The issue I am facing is defining standard colors that should be displayed on the progress bar based on the value received. Here is my code: var defaultSegmentColors = ['#FF6363', &ap ...

javascripthtmlcss

Set up a custom JavaScript function to automatically refresh a webpage

I am in the process of setting up a JavaScript function to refresh on a specific webpage. The website utilizes an overarching JS and CSS framework, but I desire this particular function to load in a unique manner. The JS function within the framework dyna ...

javascriptjquerycss

Troubleshooting: jQuery's append function does not seem to be functioning properly when trying

I am attempting to include a stylesheet in the head section of my page, but it seems that using 'append' is not getting the job done. Is there an alternative approach I should consider? Here is the code snippet: $('head').append(&apos ...

javascriptjqueryappend

jQuery failing to transmit JSON in AJAX POST call

I'm a bit perplexed at the moment, as I'm attempting to send data to my Node.js server using the code snippet below: $.ajax({type:'POST', url:'/map', data:'type=line&geometry='+str, succe ...

javascriptjqueryajaxjsonmongodb

Retrieve the name of the product from the corresponding parent element

My goal is to trigger an alert box with the product name when the "Buy now" button is clicked. I have added the necessary code in jquery to maintain the onclick event of the button. <h2 class="product-name"><a href="product1.php" title="Sample Pr ...

javascriptjqueryhtml

Create a custom element in React to detect and encapsulate links

I could really use some assistance with this issue. I have a bunch of text blocks containing links and have been utilizing linkifyjs's React component to automatically wrap the links in anchor tags. However, now I am looking to add a custom button nex ...

javascriptreactjslinkify

Having difficulty making Skrollr compatible with BootStrap 3 single page wonder

I am completely new to JavaScript, which is why I decided to use Skrollr. However, I have been facing some challenges in getting Skrollr to work properly on my webpage. I added the following code at the end of my page: <script type="text/javascript" sr ...

javascriptcsstwitter-bootstrapskrollr

Tips for utilizing an event listener for a submission button

I am encountering a problem with this event listener. I attempted to add an event listener to the submit button, but it seems to be inactive. I can't figure out what mistake I have made! Here is my code: const form = document.getElementById("form") ...

javascripthtmlfunctionmethodsaddeventlistener

What could be the reason behind the malfunctioning of my three.js lighting system?

I am struggling to identify the issue with this code snippet (http://jsfiddle.net/resistdesign/s6npL/). Despite referencing the documentation and some examples, the lights don't seem to be functioning as expected. var camera, scene, renderer, geometr ...

javascriptthree.jslight

Styling Higher Order Components with 'withStyles()' in material-ui

Here is my Higher Order Component (HOC) code: const withPaper = Component => props => ( <Paper> <Component {...props} /> </Paper> ); export default withPaper; I am looking to style the 'Paper' component using wi ...

material-uijss

Unexpected Issue Encountered in JQuery Integration

I recently added jQuery to my HTML file: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> After that, I included a link to my JavaScript file: <script src="public/javascripts/new_javascript.js" type ...

javascriptjquery

Get the file that is attached for download

Is it possible to download attached files using Paperclip without relying on external libraries? I want to enable users to download the file immediately after uploading, before it reaches the backend. I managed to achieve this using file-saver But I&apo ...

javascriptreactjsdownload

What is the procedure for initiating a POST request when the payload is ready for submission?

After a successful payment, my success page is displayed with a URL that includes a query parameter. I want to make a POST request to my API endpoint when the page loads, but I'm encountering an issue where the first POST request is empty (router.quer ...

javascriptreactjsnext.js

Troubleshooting: Issue with multiple file input elements on page - only the first input is functional and not displaying preview images

Having some trouble with loading multiple file inputs and their preview images. I've tried using getElementsByClassName but I suspect that I'm not iterating over them correctly. I want to avoid using unique IDs for the elements because they will ...

javascripthtmlfileinput

Methods to acquire the 'this' type in TypeScript

class A { method : this = () => this; } My goal is for this to represent the current class when used as a return type, specifically a subclass of A. Therefore, the method should only return values of the same type as the class (not limited to just ...

javascripttypescripttypestypescript-typingstypescript-generics

Encountering difficulties in applying a dynamic aria-label to the md-datepicker component

I am currently utilizing the md-datepicker feature in my project. You can check out how it works here: https://material.angularjs.org/latest/demo/datepicker However, I am facing an issue where I am unable to dynamically add a value to the aria-label attri ...

javascriptangularjsdatepickerangular-materialwai-aria

Activate the extended view of a Material-UI Accordion

When using Accordions to display editable entities, we often want to keep modified entities in the expanded state. Currently, we have had to duplicate functionality by lifting up the expanded state into the accordion wrapper to prevent any controlled <- ...

javascriptreactjsmaterial-uiaccordion