"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

Display the user's location on Google Maps in addition to all other markers for a comprehensive view

How can I modify the code to prompt the user for their location only when they click on a specific button, and then show all markers on the map? This jsfiddle illustrates the current issues: Google map loads markers from a database, and the user is asked b ...

javascriptjquerycssgoogle-mapsgoogle-maps-api-3

Issue with playing audio file using HowlerJS

Having trouble playing a .mp3 file in my project directory with Howler. I'm not sure if there's an error in my src. When I tried playing an online hosted audio file, it worked fine. I've placed the audio file in the same directory as Slideon ...

javascriptreactjstypescriptionic-frameworkhowler.js

How to Add a Warning Alert When Clicking in React

My issue with the image uploader is that I want the alert to appear first after clicking, without selecting from the autocomplete. Currently, the alert pops up only after choosing an image. For Codesandbox example, visit THIS LINK const handleClick = (e ...

reactjsecmascript-6react-hooksmaterial-ui

Angularjs application and bash script generating different SHA256 hashes for the same file

In my AngularJS app, I am struggling to get the digest of an uploaded file. The issue is that the resulting hash is not matching the one obtained using bash locally. Initially, I used jshashes, but when I noticed discrepancies in the hashes generated by t ...

javascriptangularjssha256cryptojsng-file-upload

Error detected (unresolved promise): Invalid JSON format is causing an Unexpected token < at the beginning of data position (Application built with React/Redux)

I'm in the process of setting up user authentication using JWT. I've successfully created an API for this purpose. Now, my goal is to integrate this authentication API with my React/Redux App. When a user signs up, I trigger an action from my S ...

javascriptnode.jsreactjsexpressredux

AngularJS ui-router in HTML5 mode is a powerful combination that allows

Hey, I'm looking to implement HTML5 mode in my project. Here's how my file structure looks: mypage.de/mysub I can only make changes within the "mysub" directory. So far, I've added the following into my index.html: <base href="/mysub/ ...

angularjshtml.htaccessangular-ui-router

What could be the reason for the three.js scene failing to render in my Svelte application?

Scene.svelte <!-- Start by binding a container, then add the renderer to this container onMount --> <script> import { onMount } from 'svelte'; import * as THREE from 'three'; let container; onMount(async () = ...

javascriptdebugginganimationthree.jssvelte

determining the number of td elements in a row of a table located within an iframe

When I interact with a cell in a table within an iframe, I want to determine the number of cells in that row. If a cell is actually a span element, I would like to consider it as part of the cell count. The iframe may contain multiple tables without any s ...

jqueryhtmliframe

jquery executes a function on each element that is discovered using the .find method

I am working with the following HTML code that is parsed by the system. I want to know how to perform an action on each "find" element and execute a specific function for every anchor found. HTML Code <ul> <li class="category"> <h2&g ...

jqueryhtmlfindnestedeach

Steps for developing your own node package manager

Looking to create a CLI package manager application called mypkgname for your Github repository? You can easily install this package globally by registering it on npm: npm install -g mypkgname-cli mypkgname init myApp cd myApp npm install npm start Here ...

javascriptnode.jsgithubnpmcommand-line-interface

Navigation bar with dropdown functionality that adjusts its width based on the content inside

Need help with a CSS dropdown menu issue on my WordPress site. The contents of the submenus are too wide, even after setting a static width for them. I'm looking for a way to make the submenu width adjust dynamically based on the title length. Any exp ...

cssnavigation

Unable to input data into my React form when it is used as a nested component

Whenever I try to include a Component in react that has another Component rendering a form, I encounter an issue where I cannot input any text into the form. However, when I treat it as a function instead of a Component, everything works fine. What could b ...

reactjsnext.js

I am encountering challenges with React.js implemented in Typescript

Currently, I'm grappling with a challenge while establishing a design system in ReactJS utilizing TypeScript. The issue at hand pertains to correctly passing and returning types for my components. To address this, here are the steps I've taken so ...

javascriptreactjstypescriptnext.jsreact-typescript

How to trigger a component programmatically in Angular 6

Whenever I hover over an <li> tag, I want to trigger a function that will execute a detailed component. findId(id:number){ console.log(id) } While this function is executing, it should send the id to the following component: export class ...

javascriptangulartypescriptangular6

Is there a way to manage or turn off the swipe snapshot feature utilized in IOS for navigating (using JS)?

I've been assigned the challenge of fixing a troublesome bug in my next.js application. The issue arises when navigating on IOS using touch gestures, causing the page content to flicker. It appears that the browser captures a snapshot of the heap and ...

iosreactjsnext.js

Guide on inserting the elements <label>, <input>, and <span> into a <li> in a particular sequence

var btn = document.querySelector('.add'); var remove = document.querySelector('.draggable'); function dragStart(e) { this.style.opacity = '0.4'; dragSrcEl = this; ...

javascripthtml

Combine the values in the array with the input

I received some data from the back-end which is being written to a form, and it's in the form of an array of objects Below is the code snippet: this.companyDetailsForm = new FormGroup({ directors : new FormControl(response?.companyDirectors) ...

javascriptangulartypescript

Tips for adjusting the font color of user-provided text within an input box using HTML and CSS

HTML code:- <p><input type="text" placeholder="Enter your username"></p> CSS code:- .main-header input { width: 90%; padding: 1rem; margin: 20px 0px; border: none; border-bottom: 4px solid #5f5fb0; ...

htmlcssinputcolors

Utilizing $templateCache with ui-router and minifying in AngularJS 1.x

Posting this as a question-answer post. How can one effectively utilize the $templateCache in the templateProvider of a route within ui-router when attempting to refactor the code? Injection is ineffective, and Angular cannot inject by reference. For ins ...

javascriptangularjsangular-ui-routerangular-templatecache

How to activate a function or event upon closing a browser tab with JavaScript

How can a function be triggered when a user closes the browser tab, preventing it from closing immediately and instead displaying a popup prompting the user to either proceed to another page or close the tab? Scenario: In the event that a user attempts t ...

javascriptjqueryhtml