Personalize your @mui TextField by adjusting the type to "number" and adding

Utilizing the library https://mui.com/material-ui/, I am importing the TextField component.
My goal is to customize it to match this design:
enter image description here

The challenge I am facing includes:

  1. Ensuring the up/down arrows are always visible (even without hovering)

  2. Applying my own unique style to these arrows consistently across all browsers

Currently, I am crafting a custom component called CustomTextField using the @mui/material styled function. However, I seem to be unable to modify anything even when trying to access:

"& .MuiInputBase-root"

I essentially aim to replicate the style seen here: https://mui.com/base-ui/react-number-input/

Thank you!

cssreactjsmaterial-ui

Answer №1

Utilize

<TextField
            InputProps={
                {
                    endAdornment: (
                        <InputAdornment position="end">
                            <Stack direction={"column"}>
                                <ArrowDropUp sx={{border:"1px solid #c0c0c0",borderTopLeftRadius:3,borderTopRightRadius:3,}}/>
                                <ArrowDropDown sx={{border:"1px solid #c0c0c0",borderBottomLeftRadius:3,borderBottomRightRadius:3,}}/>
                            </Stack>
                        </InputAdornment>
                    )
                }
            }
        />

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

The identical animation is experiencing delays in various directions

Having an issue with my image slider - when clicking on the previous image button, the animation takes longer compared to when clicking on the next image button, even though the animation duration is set to be the same for both. Any idea why this might be ...

javascriptjquerycss

No versions for "cra-template-typescript" that align with "latest" were located in our cache

Currently attempting to follow the steps outlined in this helpful guide: How to Develop a Basic React Application With an Express API. However, upon executing the command: npx create-react-app react-express-app --template typescript I encountered the foll ...

reactjstypescriptcreate-react-appyarnpkgnpx

What is the process for including a new item in an array of objects?

const data = [ { title: 'Tasks', items: ['complete assignments', 'study for exams'], }, { title: 'Ongoing', items: ['learn new skills', 'work on projects'], }, { titl ...

javascriptarraysreactjsobject

Refreshing a specific div within an HTML page

I am facing an issue with the navigation on my website. Currently, I have a div on the left side of the page containing a nav bar. However, when a user clicks a link in the nav bar, only the content on the right side of the page changes. Is there a way t ...

javascriptjqueryhtmlcss

Create a responsive iframe that expands to fullscreen when a button is clicked

Currently, I am using the following code to create an adaptive iframe with a fixed ratio for both width and height: <div id="game-container" style="overflow: hidden; position: relative; padding-top: 60%"> <iframe style="position: absolute; width ...

javascripthtmlcssiframe

Customize the appearance of the Login button in your Keycloak theme by changing its color

Currently, I am working on customizing the login theme in keycloak. One particular issue I am facing is changing the color of the login button. Despite my attempts to modify the CSS code as shown below, the intended color change does not seem to take effec ...

csskeycloak

React.JS Tip: Automatically Make Alerts Disappear in 2 Seconds!

How can I make my alert automatically disappear after 2 seconds in React.JS? Currently, the alert only disappears when I manually close it using the fecharAlerta props function. import { useEffect } from "react" import { useState } from "r ...

javascriptjquerycssreactjsreact-hooks

Adjust the background color dynamically as you scroll, given that I am using a linear-gradient

Is it possible to change the color background using JavaScript while scrolling, especially if I have a linear gradient like this: background: linear-gradient(115deg, #42c344 0%,#42c344 40%,#c4efc4 40%,#ffffff 40%,#ffffff 100%); background-attachment: fi ...

javascriptcssbackgroundlinear-gradients

Arranging Check Boxes Side by Side

I am struggling to properly align the three checkboxes and tables next to each other. I have managed to get the checkboxes on the same row, but aligning them neatly has proven to be a challenge. Using Notepad++ as my development tool, I am facing formattin ...

javascripthtmlcss

Troubleshooting Navigation Bar Toggle Button Issue in Bootstrap 5

Currently, I am in the process of working on a web project that requires the implementation of a responsive sidebar. This sidebar should be toggleable using a button located in the navigation bar. My choice for the layout is Bootstrap, and I have come acr ...

javascriptcssbootstrap-5

Leveraging icons with Bootstrap 4.5

I am currently exploring how to incorporate Bootstrap 4.5 icons using CSS. Do you have any examples of code that could guide me on how to achieve this? I am specifically interested in understanding the required CSS declarations that would allow me to use t ...

javascriptcssbootstrap-4icons

I am having trouble accessing the div. What could be causing this issue?

Here is the code I have written: - <html> <head> <title>Pranav Sharma</title> <style> @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); body { background: #ecf0f1; font-fami ...

jquerycssanimationhtml

Handling Marker Click Events in Google Maps with React

I followed the example provided in the react-google-maps documentation to create a clustered map with markers. Now, I want to enhance the functionality by adding a click event to the markers that redirects to a specific URL retrieved from my API using wind ...

reactjsgoogle-maps

Building a Next.js application that supports both Javascript and Typescript

I currently have a Next.js app that is written in Javascript, but I am looking to transition to writing new code in Typescript. To add Typescript to my project, I tried creating a tsconfig.json file at the project root and then ran npm install --save-dev ...

javascriptreactjstypescriptnpmnext.js

Position several elements in alignment within Bootstrap columns on a single row

Looking for a way to align multiple items horizontally across two columns within a row in Bootstrap? Check out the sample HTML code below: <div class="container"> <div class="row"> <div class="col-sm-6"> <h1>Short Hea ...

htmltwitter-bootstrapcsstwitter-bootstrap-3

Struggling to override a css element in a responsive design

Here is a Link that I am having trouble with. Within my CSS, I have an element named tbox. It functions as an inline box with a width set at 100%. On the homepage, it adjusts its width perfectly based on its parent and is fully responsive. However, when na ...

javascriptjqueryhtmlcssblogger

Are there limitations on column width and count in CSS3?

While exploring the URL http://www.w3.org/TR/css3-multicol/, I noticed that it only allows you to specify either 'column-width' or 'column-count', and sometimes both using 'columns'. However, it lacks options to set minimum wi ...

htmlcss

show small previews of pictures stored in a JavaScript array by using a for-loop

Currently stuck on a university project where I've set up an array of images like this: var testdata = [ { "imageID": 17, "uploadedDate": "2020-07-31 03:56:56.243139", "filepathOriginal": &qu ...

javascripthtmlcss

Ways to vertically center an OutlinedTextField and FilledIconButton within a Row?

In my code, I am using an OutlinedTextField along with a FilledIconButton in a Row. Although I have set the verticalAlignment to Alignment.CenterVertically, the button appears slightly offset towards the top. Upon examining the Preview, it seems that the O ...

kotlinmaterial-uiandroid-jetpack-compose

Troubleshooting Issues with Uploading Images to Firebase Storage Using ReactJS, JavaScript, and Firebase

Despite watching countless tutorials and conducting thorough research, I continue to encounter errors in my code. One recurring error can be seen in the image below: https://i.sstatic.net/AmG5D.png In one file, I include the line import firebase from &apo ...

javascriptreactjstypescriptfirebase-storage