Looking to customize the appearance of the up/down spin buttons in MUI TextField. https://i.sstatic.net/DcG66.png
Desiring white arrows and a black surrounding area that's slightly larger, akin to this: https://i.sstatic.net/ZxMJw.png
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:
https://i.sstatic.net/8LIOl.png
View the working [Updated] CodeSandbox here: https://codesandbox.io/s/romantic-knuth-j0n5lw?file=/demo.tsx:961-1290
Is there a way to center a fixed div inside its parent element? I'm trying to make the fixed div have the same width as its parent, but it's not working. What could be causing this issue? Check out this example on jsFiddle Here is the HTML code ...
I have a specific object that I need to render into table rows and cells using JSX... { "0": [ { "colIndex": 0, "data": { "richTextModule": "Data row 1 cell 1" } }, ...
I'm currently facing an issue while trying to deploy my website on Digital Ocean using Express, Node, and React. I can successfully view my website on localhost:3000, but when I run nodemon on the public IP:3000, all I see is /root/website/src/index.h ...
My goal is to create a dialog box that opens up in the lower half of the blue area when a specific button is clicked, while the upper half displays a backdrop. However, I have been facing issues with making the dialog box appear only in the designated area ...
In this scenario, the parent component has access to the values of the child components but struggles to calculate the sum correctly. Instead of displaying the accurate total, it shows 0. https://i.sstatic.net/1etAx.png The expected behavior is for the To ...
I need to choose a field that functions similarly to a dropdown box, but does not actually display as one. The select field reveals its values in a pop-up with values and sub-values that I need to select. Challenges : I'm struggling to locate the ob ...
Whenever I attempt to upload a file to the public folder on Vercel, I encounter the following error. ⨯ [Error: EROFS: read-only file system, open '/var/task/public/bb17ad93-017f-4fdf-a2db-713d9a390143.webp'] { errno: -30, code: 'EROFS& ...
I have multiple DIVs with the same class, and I am looking to group them into a single DIV using either jQuery or pure JS. <div class="a"> <div>1</div> </div> <div class="a"> <div>2</div> ...
Need Help with Reading Values from Repeating Control in Angular 6 I am struggling to retrieve the value of a form field in the TS file. Can someone please assist me with this? This section contains repeating blocks where you can click "add" and it will g ...
import AlphService from './AlphService'; export default class MyClass extends React.Component { alphService; constructor(props) { super(props); alphService = new AlphService(); this.state = alphService.getState(); } componentWillMount( ...
As a complete beginner to these technologies, please bear with me if my question sounds strange and the terminology is not quite right. I have a component that displays data in a table format. export class SourceFieldComponent implements OnInit { ... ...
export class AppComponent implements OnInit { userSubmitted = false; accountSubmitted = false; userForm!: FormGroup; ngOnInit(): void {} onSubmit(type: string): void { this[type + 'Submitted'] = true; if(this[type + 'For ...
I am currently working on an app that should automatically open itself when there is a lock and unlock event. I have included the code below, but unfortunately, it is not functioning as expected. import android.content.BroadcastReceiver; import android.con ...
Hey there! I'm currently working on a form component that includes a button array. I've added icons to the buttons using the value attribute, like so: <button value={'admin'} onClick={(e)=> handleClick(e.target.value)}> & ...
When working with HTML5, I discovered that you can create multiple input elements that share the same option list like this: <datalist id="list1"> <option value="A"> <option value="B"> </datalist> input1: <input list="l ...
I have created a unique page for users to purchase subscriptions, but I am having trouble accessing that page because the button is not appearing in the menu. I followed the steps outlined in the official guide, but only the dashboard and resources buttons ...
I am looking to develop a basic csv parser using the csv module and effectively handle errors when the file is missing. If I remove the sleep functions, the code successfully reaches the Finally statement (and produces an error output). What am I overloo ...
JavaScript if ((valid1 && valid2 && valid3 & valid4 && valid5 && valid6 && valid7 && valid8)==1) { // include an image in the specified ID. document.formElem.next1.disabled=false; } else { docume ...
I am struggling to position small planetary images around the main logo in a way that creates a satellite-like effect. Despite my efforts with positioning and margins, I have not been successful in achieving the desired look. Additionally, when I insert th ...
Recently, I encountered an issue with a module form that appears as a pop-up. Within this form, users can input data required to create a new object of a specific class. One field allows users to select a ventilation zone for the new room object being crea ...