Ways to customize the TextInput component in React-Admin

I am facing a challenge with overriding specific fields in my custom theme. It seems that setting the custom theme also overrides other fields unintentionally.

I attempted to use useStyles to resolve this issue, but unfortunately, it did not work as expected. I also tried using direct style props, however, that approach was unsuccessful too.

const useStyles = makeStyles({
    MuiInputBase: {
        root: {
            width: "800px"
        }
    }
});


<TextInput className={classes.MuiInputBase} variant="outlined" label="Search" source="search" alwaysOn />
javascriptreactjsmaterial-uireact-admintextinput

Answer №1

According to the documentation, when using the className, it only allows you to override the style of the root component. If you need to override inner styles, you should utilize the classes prop:

const customizeStyles = makeStyles({
    MuiInputBase: {
        root: {
            width: "800px"
        }
    }
});

const MyInput = () => {
   const classes = customizeStyles();
   return <TextInput classes={classes} variant="outlined" label="Search" source="search" alwaysOn />;
};

For more information, visit

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

AngularJS causing a modal popup to appear even when the associated button is disabled

When using a Bootstrap modal popup form that opens on button click in AngularJS, I noticed that the modal still appears even when the button is disabled. Can someone help me understand why this happens? Here is the code for the button: <a class="btn b ...

javascriptjqueryangularjstwitter-bootstraptwitter-bootstrap-3

Issue with retrieving the current location while the map is being dragged

How can I retrieve the current latitude and longitude coordinates when the map is dragged? I've tried using the following code: google.maps.event.addListener(map, 'drag', function(event) { addMarker(event.latLng.lat(), event.la ...

javascripthtmlasp.net.netgoogle-maps

How can the datetime value of the Apex Charts datapoint be shown in the tooltip?

I'm struggling to find the proper location within the w.globals object to display the x-axis value, which is a datetime, in the tooltip of the datapoint. var chartOptions = { ... xaxis: { type: "datetime" }, tooltip: { x: { format: " ...

javascriptapexcharts

Instructions for generating multiple components in React when an array is not at your disposal

In the process of developing a Tic-Tac-Toe game, I am in need of creating 9 empty squares. Currently, I have a ul element and 9 li elements representing each square in the game. The issue is that there is no array available for looping through and generati ...

javascriptreactjs

Warning: Unhandled promise rejection occurred while running the test

Currently delving into the world of selenium with a focus on testing the registration page. I've crafted a registration page class equipped with methods for monitoring registrations. However, upon attempting to execute a test within the application cl ...

javascriptselenium

Obtaining a specific item from a group using AngularJS. Utilizing a declarative method

Consider a scenario where you need to apply a CSS rule to a specific element within a collection that needs to be selected. <div ng-repeat="fragments" ng-click="makeSelected()"></div> $scope.fragments = [ {id: 6379, someProperty: "someValu ...

javascriptangularjs

Wavy CSS Animation

For assistance with my spinning image, please check out this fiddle: https://jsfiddle.net/dricardo1/9a8p6srb/ Hello! I'm struggling with a spinning image that has a noticeable wobble when rotating. I can't seem to find a solution to make the rot ...

javascripthtmlcsscss-animations

What are the best ways to incorporate advertisements into a website built on Gatsby?

Media.net Ads provided me with two scripts to insert into the head and body tags of my site. For the head tag - <script type="text/javascript"> window._mNHandle = window._mNHandle || {}; window._mNHandle.queue = window._mNHandle.queue || [] ...

reactjsjsxgatsby

Using multer for file upload causes React application to refresh

Important Update: The issue I am facing is related to hot-reloading in Creact React App. For more information, check out the following links: https://github.com/expressjs/multer/issues/566 https://github.com/facebook/create-react-app/issues/4095 I am del ...

node.jsreactjsexpressmulter

What are the steps to generating and sharing 'npm create' scripts?

I am looking to develop and release a script on npm that functions similarly to: npm create qwik@latest or yarn create next-app --typescript However, I am unsure where to begin. Despite searching extensively online, I have not been able to find any helpf ...

javascriptshellnpmyarnpkg

I am struggling to understand why clicking this button is not successfully submitting the form to Google Sheets

I am facing an issue with my Google Sheet setup that collects form data from my website. The problem is, I am unable to link the event to a button that already exists ('CompleteOrder'). Strangely, it works perfectly fine if I add a new button: & ...

javascripthtmlgoogle-apps-script

My Express server is having trouble loading the Static JS

I'm feeling frustrated about this particular issue. The problem seems to be well-solved, and my code looks fine, but I can't figure out what's wrong . . . I have a JavaScript file connecting to my survey page, which I've added at the b ...

javascriptexpress

Transferring .jsx files between React applications

Recently, I attempted to create separate .jsx files in React. I successfully made a couple of them using export default name / import name from ./name.jsx'. However, I encountered an issue. Initially, when I imported Route and Links from react-router, ...

reactjsimportexportcomponents

What are some effective methods to completely restrict cursor movement within a contenteditable div, regardless of any text insertion through JavaScript?

Recently, I encountered the following code snippet: document.getElementById("myDiv").addEventListener("keydown", function (e){ if (e.keyCode == 8) { this.innerHTML += "&#10240;".repeat(4); e.preventDefault(); } //moves cursor } ...

javascripthtmlcursor

What could be causing the lack of animation in W3schools icons?

I've followed the steps provided and even attempted to copy and paste them. However, I'm experiencing an issue where the animation doesn't fully execute. Instead of the bars turning into an X shape, they reset halfway through the animation. ...

javascripthtmlcss

Enhanced Slider Display featuring Multiple Posts for Improved Performance

My Sample Page features a slider that displays over 200 posts, each containing 5 images. However, the slider loads all the images at once, causing my page speed to be very slow. I am looking for an optimized way to display the slider without compromising l ...

javascriptphpwordpress

`Finding it difficult to halt the spread of events in reactJs`

One of my conditions involves a simple dropdown menu: handleDropdown = (e) => { if (e.type === "focus") { console.log("inside dropdown focus"); this.setState({ dropDownDis: "block" }) } else if (e.type === "blur") { console.lo ...

javascriptreactjs

Aligning SVG shapes within each other

I recently encountered a scenario where I needed to position SVG shapes in the center of each other with varying scales. For instance, placing a rectangle or triangle within the center of a circle. While I found some solutions that worked for shapes like ...

javascripthtmlcsssvg

Backbone.js: Navigating the Default Path Issue

I've embarked on creating my very first BB app. Progress is decent, but I've hit a roadblock. My router implementation appears as follows: var PlayersAppRouter = Backbone.Router.extend({ routes: { '': 'index', ...

javascriptbackbone.js

What is the best way to implement a multi-row form in Vue.js?

Form Structure: <card-wrapper v-for="(passenger, index) in form.passenger" :key="index" :icon="['fas', 'user']" :title="`Passenger ${index + 1}`" class="mb-5" > <validation-observer ...

javascriptvue.jsvuejs2vuexnuxt.js