Utilizing CSS-in-JS to eliminate arrow buttons from a TextField

I'm currently developing a webpage using React and Material-UI. One of the components I have is a TextField element, and I need to remove the arrow buttons that typically appear on number input fields. If I were utilizing CSS, I could easily achieve this with the following code:

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

However, since I want to style the page using CSS in JS, specifically by employing 

export default withStyles(styles)(FormPersonalDetails)
, I am presented with a new challenge. So, how can I accomplish this task?

const styles = theme => ({
    number: {
        // Add your styling here //
    }
});

Within the render() function:

const { classes } = this.props;
return (
    <TextField className={classes.number} />
)
javascriptcssreactjsmaterial-uireact-with-styles

Answer №1

Here are a couple of syntax options to consider. Below, you will find two different approaches. The first one utilizes the className with TextField and then selects the descendant input element. The second option directly applies the className to the input element using the TextField inputProps attribute.

In both cases, the & symbol is employed to refer to the parent selector (i.e., the element receiving the class).

import React from "react";
import ReactDOM from "react-dom";

import TextField from "@material-ui/core/TextField";
import { withStyles } from "@material-ui/core/styles";

const styles = theme => ({
  number: {
    "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button": {
      "-webkit-appearance": "none",
      margin: 0
    }
  },
  input: {
    "&::-webkit-outer-spin-button, &::-webkit-inner-spin-button": {
      "-webkit-appearance": "none",
      margin: 0
    }
  }
});

function App({ classes }) {
  return (
    <div className="App">
      <TextField type="number" className={classes.number} />
      <br />
      <TextField type="number" inputProps={{ className: classes.input }} />
    </div>
  );
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);

https://codesandbox.io/s/vq5yrr9pv7?fontsize=14

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: Batch processing for saving multiple students simultaneously

I have been working on saving information about students, and I've written the code below. However, I'm unsure how to proceed from here. Any additional information or resources related to this topic would be greatly appreciated. <div ng-contr ...

javascriptangularjs

How can Rails resize images for display on views?

Is there a way to resize an existing image to specific dimensions without creating multiple versions? Currently, I am using Carrierwave and Rmagick to upload images to my Amazon S3 storage bucket. It generates two versions of the image: the original and a ...

ruby-on-railscssimage-processing

Spontaneously generating visuals that lead an unpredictable existence

Every 0-2 seconds, I generate a unique image and place it randomly within a designated area. setTimeout("addImage()", Math.floor((Math.random() * 2000) + 1)); To maintain order, I want these images to vanish after being visible for an interval o ...

javascriptjquery

The wells are surpassing the line

I'm attempting to arrange 3 Wells horizontally in one row, as shown below <div class="row" style="margin-top: 10px"> <div class="span4 well"> <h3 class="centralizado"><img src="/assets/temple.png" /> & ...

csstwitter-bootstraptwitter-bootstrap-rails

How can one transform a web-based application into a seamless full-screen desktop experience on a Mac?

"Which software can be utilized to enable a web application to display an icon on the desktop of a Mac computer, while also opening up the web application in a fully immersive full-screen mode that supports all the touch and gesture functionalities provi ...

javascriptjqueryhtmlcssgoogle-chrome

How long does it take to delete and recreate a cloudfront distribution using AWS CDK?

I am currently undergoing the process of migrating from the AWS CDK CloudfrontWebDistribution construct to the Distribution Construct. According to the documentation, the CDK will delete and recreate the distribution. I am curious about the total duration ...

javascripttypescriptamazon-web-servicesaws-cdk

Here is a method to transform the JSON object into a string as demonstrated below:

Presented below is a JSON object: { "category": "music", "location": { "city": "Braga" }, "date": { "start": { "$gte": "2017-05-01T18:30:00.000Z" }, "end": { "$lt": "2017-05-12T18:30:00.000Z" } } } I am looking t ...

javascriptangulartypescript

Improved the nested Immutable function within the immutable.js library

What is the best way to update a specific item within a nested immutable Map without altering the entire tree? For example: var tree = Map({ branch1:Map([]), branch2:Map({ 1: Map({id:1,value:'hello'}) }), }); How can I efficiently update the ...

reactjsreduximmutable.jsreselect

Unchecking random checkboxes within a div using jQuery after checking them all

Once a link is clicked on, all checkboxes within that particular div will be checked. function initSelectAll() { $("form").find("a.selectAll").click(function() { var cb = $(this).closest("div").find("input[type=checkbox]"); cb.not(":checked" ...

javascriptjqueryhtml

Tips for centering a div horizontally when it exceeds the width of a mobile screen

My challenge is to create a circular div element that is wider than the mobile screen and perfectly centered. This circular div needs to be an exact circle, specifically targeted for mobile screens. I've attempted to achieve this using the code in th ...

javascripthtmlcss

Retrieve the URL of the active tab within a Chrome extension's background.js script

Is there a way to retrieve the current tab's URL in background.js? I have tried the following code in background.js: window.chrome.tabs.query({ "active": true, "windowId": window.chrome.windows.WINDOW_ID_CURRENT }, (tabs) =&g ...

reactjsgoogle-chrome-extension

Dynamically loading Ember templates with asynchronous requests

I need a way to dynamically load HTML content from another file using the code below: App.MainView = Ember.View.extend({ template:function(){ $.ajax({ url: 'views/main.html', dataType: 'text', async: false, ...

javascriptjqueryajaxember.js

Hover over the image to trigger animation effects

Looking for a way to enhance my current jQuery script that creates an orange transparent hover effect over images. How can I add animations, specifically a fade in and out effect? $(document).ready(function() { $('#gallery a').bind('mo ...

jqueryhtmlcssjquery-uijquery-animate

Scrolling through a list while the user types in the search bar

I am currently working on a table that populates based on an array of country objects, and I have added a search bar to enable live filtering through the countries array. However, as a newcomer to Vue, I am struggling to implement this feature effectively. ...

javascriptarraysvue.jsfilter

Styling a class doesn't have any effect - NextJS

Currently, I am immersing myself in learning NextJS and have chosen to work with a straightforward weather API that gathers data from a specified city. The new concepts I've been picking up are quite intriguing and I'm really enjoying the process ...

reactjsnext.js

React-Color component crashes when attempting to update the color

Having trouble implementing a custom color picker using React-Color and running into an issue. Take a look at a simplified example of the problem here: https://codesandbox.io/s/react-color-multiple-custom-pickers-q0eiq The initial state is correct, but ...

reactjsreact-color

Enhancing the layout of an ASP.NET master page with an HTML table that extends beyond the

My ASP.NET (VB) master page contains a table with 9 columns, each intended to hold textboxes. However, even without textboxes, the cells are extending beyond the content margins. How can I adjust them to fit within the master page margins? If they still ...

asp.nethtmlcssvb.netmaster-pages

What steps can I take to personalize Material UI within a React application?

As someone who is new to this UI framework and React, I have been tasked with developing an application that requires more design patterns. I specifically chose a framework that does not depend on jQuery code. However, I am facing challenges when it comes ...

javascriptreactjsmaterial-ui

Tips for enabling button clickability while MuI Dropdown is displayed

I'm new to using MUI and I recently utilized a code snippet like this: <Select name="premiumUser" value={1} displayEmpty={true} fullWidth> <MenuItem value={1}>True</MenuItem> <MenuItem value={2}>False</Menu ...

reactjsmaterial-uidropdownpopoverpopper

How to focus on an input element in Angular 2/4

Is there a way to focus on an input element using the (click) event? I'm attempting to achieve this with the following code, but it seems like there may be something missing. (I am new to Angular) sTbState: string = 'invisible'; private ele ...

javascriptangular