"Customizing the Material-ui TextField DOM Element: A Step-by-Step

After trying the code below, I was expecting to see a yellowish "Hi," but instead received [object Object].

Is there a way to correct this issue? Possibly utilizing InputProps would help, but I haven't been able to locate a comprehensive tutorial on how to do so.

<TextField
    id="outlined-multiline-static"
    label="Multiline"
    multiline
    fullWidth
    rows="22"
    value={<div> Hi <div style={{ color: "yellow" }}>There</div></div>}
    variant="outlined"
  />

Edit: I have simplified the problem and only want part of the text to appear yellow.

https://codesandbox.io/s/hopeful-bush-gfi9m?fontsize=14&hidenavigation=1&theme=dark

javascripthtmlcssreactjsmaterial-ui

Answer №2

To style text without using div's inside the value attribute, you can utilize InputProps in a TextField component.

import React from "react";
import TextField from "@material-ui/core/TextField";

export default function App() {
  return (
    <>
      <TextField
        id="outlined-multiline-static"
        fullWidth
        rows="12"
        value="Hi"
        variant="outlined"
        InputProps={{
          style: {
            color: "yellow"
          }
        }}
      />
    </>
  );
}

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

Combining one item from an Array Class into a new array using Typescript

I have an array class called DocumentItemSelection with the syntax: new Array<DocumentItemSelection>. My goal is to extract only the documentNumber class member and store it in another Array<string>, while keeping the same order intact. Is th ...

javascriptangularstringtypescriptobject

What is the solution to the error message stating that <tr> cannot be a child of <div>?

displayTodos() { return this.state.todos.map(function(item, index){ return <div todo={item} key = {index}>; <tr> <td>{item.todo_description}</td> <td>{item.todo_responsible}</td> ...

javascripthtmlreactjsrender

What are the distinguishing factors between using redux saga and redux thunk?

How do you know when to use redux-saga versus redux-thunk? Which one would be more suitable for an ecommerce platform? Is there a noticeable difference in performance between the two? Are thunks faster than sagas? ...

reactjsreduxreact-reduxredux-saga

Eslint - Utilizing arrow function method syntax in ReactJS

Within a React component, I am using the following syntax: deletePerson = () => { } An error in Eslint is showing up for the first "=" sign. Parsing error: Unexpected token = Can you identify what is causing this issue with the syntax? ...

reactjsmethodsecmascript-6eslint

The background color property of the CSS class "ui-layout-north

Currently working with primefaces 4.3 and incorporating it into my main UI. My goal is to modify the background color of the north unit to red, as currently only the top 80% of the unit is affected. .ui-layout-north .ui-layout-unit-content { backgro ...

cssjsf-2

"Material UI version 5.0 now features a functionality where all items are automatically selected when the autocomplete value is

Current Scenario ...

reactjsautocompletematerial-ui

How can I use querySelector in JavaScript to target all div elements that have the same class?

I'm having an issue with the document.querySelector in my JavaScript code. It currently only selects the first div that contains the class "test", but I need it to select all such divs. Is there a way to achieve this using my existing JavaScript? ...

javascripthtmlcss

Connecting two divs with lines in Angular can be achieved by using SVG elements such as

* Tournament Brackets Tree Web Page In the process of developing a responsive tournament brackets tree web page. * Connection Challenge I am facing an issue where I need to connect each bracket, represented by individual divs, with decorative lines linki ...

htmlcssangulartypescript

Utilizing type guards in prop functions for conditional rendering within React TypeScript adds an extra layer

In my code, I am conditionally rendering a Button. However, I encountered an issue on line 7 where TypeScript is indicating that the first parameter of the exportExcel function may be null even though it should not be, considering the conditional render lo ...

reactjstypescript

Using $q.all function in a controller to fetch data from a service and receiving an

For a considerable amount of time, I have been facing some challenges with an API call. Even though the console.log in my service is returning the necessary data, the controller seems to receive an empty object. I suspect there might be an issue with how I ...

javascriptangularjshttpangular-promise

How to retrieve the user-agent using getStaticProps in NextJS

Looking to retrieve the user-agent within getStaticProps for logging purposes In our project, we are implementing access and error logs. As part of this, we want to include the user-agent in the logs as well. To achieve this, we have decided to use getSta ...

javascriptreactjsnext.jsserver-side-renderinguser-agent

Determining the width of a window using JavaScript

My website is experiencing some mysterious issues with $(window).width(). When I open my site in the Chrome Device Toolbar with a window size of 320xXXX, then run $(window).width() in Google Chrome's JavaScript console, it returns 980. As a result, n ...

javascriptjquerysizewidth

What is the best way to incorporate external HTML content while ensuring HTML5 compatibility? Exploring the different approaches of using PHP, HTML

While this may seem like a simple task to the experts out there, I have been struggling for over an hour without success... My objective is to use a single footer file and menu file for all my webpages while considering blocking, speed, and other factors. ...

phpjavascriptperformancehtml

Challenges with the Placement of Buttons

I am facing an issue with the code below: document.addEventListener("DOMContentLoaded", function(event) { // Select all the read more buttons and hidden contents const readMoreButtons = document.querySelectorAll(".read-more"); const hiddenConten ...

javascripthtmljquerycss

Tips for storing and replicating jQuery events

I am working on saving jQuery events in a database. // This Function is called On Click function trackevent(event){ window.events.push(event) } $.each(window.events, function(i, item){ console.log(i +" - "+ $.parseJSON(item)); }); The events a ...

javascriptjsonjquery

Tips for keeping the Menu bar at the top of the page while scrolling from the middle

I came across a technique mentioned here that I wanted to implement. I used this jsfiddle link (which worked well) to create my own version http://jsfiddle.net/a2q7zk0m/1/, along with a custom menu. However, now it seems like it's not working due to a ...

javascriptjqueryhtmlcss

Utilize jQuery and HTML simplistically to display or conceal divs throughout a webpage

After developing some basic jQuery code using if-statements to toggle the visibility of Divs based on a select list in HTML, I am seeking ways to enhance this code: 1) How can I achieve the same functionality with fewer lines of code? 2) Rather than manu ...

javascriptjqueryhtmlif-statementoptimization

Having trouble with Bootstrap v4 dropdown menu functionality?

For some reason, I cannot get the dropdown menu to work in my Bootstrap v4 implementation. I have tried copying and pasting the code directly from the documentation, as well as testing out examples from other sources on separate pages with no luck. &l ...

javascripthtmlcss

How can I resolve the "AngularJS 1.6.6 component controller not registered" error plaguing my application?

I am currently using AngularJS version 1.6.6 along with Gulp for my project. Here are the snippets of my code, particularly focusing on the AppLayout component: /// app-layout.component.js angular.module('app').component('appLayout&ap ...

javascriptangularjsangularjs-controlleras

invoking a PHP function within a JavaScript script

In my collection of essential functions, there is one that I am particularly interested in: //the functions file //........ function user_exists($username){ $username = sanitize($username); $query = mysql_query("SELECT COUNT('user_id') F ...

javascriptphpajax