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

How can we format a number to match the Brazilian number system while still maintaining its ability to be used in calculations?

Is there a known method to convert the number 123,123,214.93 into Brazilian currency format (123.123.214,93) for display purposes only? I attempted to achieve this conversion using a JavaScript function where I added periods after every 3 numbers and repl ...

javascriptreactjsnext.js

Advantages and disadvantages of employing additional reducers versus dispatching within async thunk operations

I am new to the React & Redux ecosystem and I am currently trying to understand the difference between using extra reducers versus directly dispatching actions within an async thunk when working with the Redux toolkit. An example showcasing both solutions ...

reactjsreduxredux-thunkredux-toolkitredux-reducers

Utilizing CSS for displaying and hiding content based on its unique identifier

Is it possible to show/hide a div using only CSS based on its ID? Showcasing this functionality in jQuery or vanilla JavaScript is straightforward, but can the same effect be achieved with pure CSS? The checkbox hack requires a specific structure to func ...

css

Enhancing your scheduling capabilities with Kendo UI Web Scheduler - Dynamically managing resources dataSource

I've been attempting to dynamically change the resources dataSource in my Scheduler, but unfortunately, the changes I am making are not reflecting in the Scheduler interface. Here is how I have set up the scheduler: $("#scheduler").kendoScheduler ({ ...

javascriptkendo-uischedulerkendo-schedulerkendo-datasource

Implement a mouseenter event to all input elements that have specific names stored in an array, utilizing jQuery

I'm struggling to figure out how to apply my function to all input elements with a name that is included in my array. This is what I've attempted so far: var names = ["name1", "name2"]; $(document).ready(function(){ $('input[name=names[ ...

javascriptjqueryinputjquery-selectors

Conceal and reveal elements using a specific identifier with

Web Development Guide <ul id="menüü"> <li id="meist"> <p><a href="meist.html">Meist</a></p> </li> </ul> <div id="submenu"> <ul id="submeist"> ...

jqueryhtmlcssweb

What methods does node.js use to distinguish between server-side and client-side scripts?

One interesting aspect of PHP is the ability to combine both PHP and JavaScript code within a single file. However, it raises the question: How can we incorporate both server-side and client-side JavaScript code in an HTML file? ...

javascriptnode.js

What is the reason behind Azure Identity's choice of Browserflow over nodeflow for integration in my Next.js application?

Embarking on my inaugural project with Next.js, I find myself in unfamiliar territory. Rather than joining existing projects, I am constructing apps from scratch, encountering a challenge with Azure Identity along the way. Upon delving into the node module ...

javascriptazurenext.js

Alphabetic divider for organizing lists in Ionic

I am currently working with a list in ionic that is fetched from a controller and stored in localStorage. My goal is to add alphabetic dividers to the list, but I am facing some confusion on how to achieve this. Here is a snippet of the code: app.js $ion ...

javascripthtmlangularjsionic-framework

What is the proper way to showcase the hover effect on a nested ul list item in the DOM?

In an attempt to create a menu, I have written the following code: var sheet_nav = document.createElement('style'); sheet_nav.innerHTML = "nav{ margin: 100px auto; text-align: center;}"; document.head.appendChild(sheet_nav); var sheet_nav_ul = ...

javascripthtmlcssonmouseoveronmouseout

Yii2 Gridview - Horizontal Scroll Bar at the Top of the Page

I found a helpful post on Stack Overflow about creating a Yii2 Gridview with a fixed first column (Yii2 : Gridview with fixed first column), and now I'm looking to add a horizontal scrollbar at the top of the grid. My users really appreciate being ab ...

cssgridviewyii2

Is it possible to selectively export certain interfaces within a .d.ts file?

// configuration.d.ts export interface Configuration { MENU_STRUCTURE: Node[]; } interface Node { name: string; } Looking at the snippet above, I am aiming to only export Configuration. However, I noticed that I can also import Node from an ext ...

javascripttypescriptimportinterfaceexport

Styling text with bold formatting can be done conditionally within JSX

Currently, I am developing a Next.JS Google Clone and facing an issue in styling the search input within the search results objects retrieved using the Google API. I want to find a way to dynamically bold the {router.query.term} within my {result.snippet} ...

reactjsnext.jsjsx

What is the best way to securely transfer API keys to a React frontend for use in a React component?

I'm currently working with @react-google-maps/api to develop a map component in React. To load the component, we have to provide an API key for useJsApiLoader. How can I securely manage the API key so it's not exposed on the frontend? (Using an E ...

reactjsapiexpressgoogle-maps-api-3react-google-maps

Interactive hover effect in JavaScript displays a larger version of other thumbnails when hovering over a dynamically loaded thumbnail image, instead of its own full-size image

I recently began teaching myself PHP and Dreamweaver with the help of a video tutorial on building data-driven websites using Dreamweaver. My goal is to create a dynamic table with 6 columns and 20 rows. column1 | column2 | column3 | colu ...

phphtmlcssjavascriptmysql

Ajax is not able to trigger a POST request to a PHP form

My form is not posting for some unknown reason, despite everything else on my server functioning properly. Below is the code snippet in question: PHP <?php if(isset($_POST['field1']) && isset($_POST['field2'])) { $data ...

javascriptphpjqueryajaxforms

Tips for resolving the issue of windows resizing due to off-screen elementsplacement:

During the development of a project, I wanted to incorporate an effect into my webpage. To achieve this, I positioned elements off the screen. However, upon running the code, the window resized with scrollbars, causing inconvenience for mobile users Below ...

jqueryhtmlcssresizewindow

Node.js - Headers cannot be sent again once they have been sent

I came across a similar issue to mine at this link. I suspect that the error is occurring due to how my .end() calls are configured. Let's take a look at the code in question: app.get('/anihome',function(req,res){ var context = {}; functi ...

javascriptnode.jsexpresshandlebars.js

Recreate body content with JQuery Mobile

I've been attempting to duplicate the entire HTML content within the tags. However, even though the appearance on screen is correct, none of the links are functioning.</p> <p>To view the fiddle, click here: [Here is a fiddle][1]</p> ...

javascripthtmljqueryjquery-mobile

Troublesome CSS conflicts arise when using minified assets with AngularJS and Webpack

After transitioning my Angular project to the Webpack build system, I encountered issues with Angular Dependency Injection in the JS source code. Surprisingly, now I am facing JS errors that are targeting CSS files, leaving me completely bewildered about w ...

javascriptangularjswebpack