Looking to customize the appearance of the up/down spin buttons in MUI TextField.
Desiring white arrows and a black surrounding area that's slightly larger, akin to this:
I'm aware that adjustments need to be made within
input::-webkit-outer-spin-button, input::-webkit-inner-spin-buttonPassing props directly to the TextField component using the sx prop is a simple and effective method:
<TextField
type="number"
sx={{
"input[type=number]::-webkit-outer-spin-button": {
...spinnerStyles
},
"input[type=number]::-webkit-inner-spin-button": {
...spinnerStyles
}
}}
/>
If you prefer, you can also pass the props through the InputProps prop of the TextField:
<TextField
type="number"
InputProps={{
type: "number",
sx:{
"input[type=number]::-webkit-outer-spin-button": {
...spinnerStyles
},
"input[type=number]::-webkit-inner-spin-button": {
...spinnerStyles
}
}
}}
/>
To customize the spinner buttons and their background, consider encoding your PNG button image in base64 format and use it as the background for the spinner:
const spinnerStyles = {
"-webkit-appearance": "none",
background:
"#000 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAcCAYAAADr9QYhAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAI6ADAAQAAAABAAAAHAAAAACbzWzwAAABB0lEQVRIDe2XMQ6DMAxFf6suwAjszLDCTeASHALEyFlg5hLsXIJDtPIQVFkkgrhDVCWLcQzJ84/liEeSJG84MIqiwMMVmCAI8HRAlAPBwxxSsIf/VKZpGozjiCiKWL7X3Z8oQyB1XSPLMnRdZw0khlEgKn8JkAiGg0iBrJse1UZZlmr/U7vvO7ZtO43xSWp61jB8ManvO7BJQVEBmxa2iXkYnWpOKfPSUV6Zb9sWaZpqX12WBeu6auM8IOozBNL3/SnQNE2Y55nvp/XFfYY67DAMIPs97oKob8U1w4FsQQhIdEwqI7J0ZFVVgerEZvi7yaSauGZMi9+NOQMThqEbP3FxHCPPc3wAmdpEetL9b2QAAAAASUVORK5CYII=) no-repeat center center",
width: "2em",
opacity: 1,
position: "absolute",
top: 0,
right: 0,
bottom: 0,
overflow: "hidden",
borderTopRightRadius: "0.25rem",
borderBottomRightRadius: "0.25rem"
};
You have the flexibility to style the remaining parts of the TextField as desired based on your existing styles or theme.
Output:
View the working [Updated] CodeSandbox here: https://codesandbox.io/s/romantic-knuth-j0n5lw?file=/demo.tsx:961-1290
import React from 'react'; import {FirstCustomComponent} from './somewhere'; import {SecondCustomComponent} from './somewhere-else'; const CustomSwitchComponent = ({componentTitle, apple, banana}) => ( componentTitle === ...
I am seeking to customize the color of the switch component based on its checked and unchecked state. By default, it displays in red. My goal is to have the "ball knob" appear yellow when the switch is checked and grey when it is not. This styling must be ...
I'm currently working on customizing the menu of my WordPress theme to display a different color for the active page name. Although my CSS code works well for all page names except the current one: .navbar-nav li a { font-family: georgia; fo ...
I have successfully integrated react-redux and redux-persist into my react-native project. However, I encountered an error when trying to add an object to the Redux state: [TypeError: undefined is not an object (evaluating 'iter[Symbol.iter ...
During the process of writing Jasmine unit tests for my Typescript app and running them via Resharper, I encountered an issue with executing an action when the handler throws an exception: describe("Q Service Test", () => { var q: ng.IQService; ...
I am currently utilizing the CardHolder component from material-ui, which can be found at https://material-ui.com/api/card-header/. Within my project, I have this image: src/img/apple.svg In an attempt to set the avatar image, I tried the following code ...
I am currently working on a website project and have a database filled with recipes to support it. The issue I am facing is related to the search feature on my webpage. At the top of the page, there is a textarea where users can input their search queries ...
I have a collection of items called Fixtures. Each fixture contains a group of items named FixtureParticipants. Here is my process for generating choices: <tr *ngFor="let fixture of fixtures$ | async; let i=index"> <th scope="row& ...
Is there a way to dynamically change CSS? I am trying to set the class=sheet padding-top: 28mm; when the size of $anArray is less than 30. If the array has more than 30 elements then apply padding-top: 28 * 2 mm;. Finally, if the array exceeds 60, use pad ...
When using this component, the expected behavior is as follows: I press it, the selectedOpacity() function is called, the state is updated so it now renders with opacity=1. However, for some reason, after calling this.setState, it is not re-rendering. I h ...
Currently, I am honing my web scraping abilities by utilizing the World Surf League website. So far, I have not extracted any data; instead, I am focusing on navigating the site using Selenium. However, I have hit a roadblock where I am unable to 'cli ...
As a novice delving into a project in the MEAN stack, I'm encountering inconsistent HTML previews. When I view it independently versus running it from the project, the display varies. Here's the intended appearance (in standalone preview): imgu ...
I am trying to increase the width and height of a calendar popup using react-datepicker, but I cannot find any information in their documentation or GitHub pages on how to do this. I have tried setting the width and height for the "react-datepicker-popper" ...
I am working on setting up a webpage connected to my company's internal Intranet page that is specifically designed to allow an iPad to take a picture and then email the picture using our webmail application. The current HTML code I have only allows m ...
I have recently updated an older React application from blueprintjs version 1 to version 4 by following the documentation. However, I am now facing an issue where the icons are not displaying correctly as shown in the image below. Could someone please poi ...
As a newcomer to Svelte and SMUI, I recently explored the official documentation at . I encountered some peculiar attribute declarations like "table$aria-label" and "input$autocomplete". The usage of dollar signs in naming conventions as well as the prefix ...
I've embedded a responsive Vimeo video within a link, but the link is not functioning and does not show a cursor upon hovering. Any suggestions on what could be causing this issue? .container { position: relative; margin-bottom: 20px; max-width: ...
As I work on my website, I am incorporating a div structure as shown below: <div class="container"> <div class="one-third column"> <a id="tab1" href="inc/tab1.html"><h2>tab1</h2></a> </div> & ...
Does anyone have an easy way to make the dropdown from Twitter's typeahead jQuery plugin initially slide down or fade in? I'm trying to animate the size of the dropdown menu when it adjusts, but even a simple fade or slide in would be fine. I pre ...
My panel component includes a header with a title and buttons positioned in the right corner. Currently, the downward arrow (chevron) is used to toggle the expansion/minimization of the panel's contents. When I attempt to make the header clickable to ...