For the first 10% of the text field, one background color is used, while for the remaining 90%, another background color is applied.
<TextField
className={classes.root}
type="text"
placeholder="username"
variant="outlined"
style={{borderRadius:'50',
backgroundColor: "white"
}}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<PersonIcon />
</InputAdornment>
)
}}
/>
The demo textfield can be found below:
To achieve a similar effect as shown in your screenshot, you can override the InputAdornment. Keep in mind that the input next to the InputAdornment has its box-sizing set to content-box, so simply setting the height to 100% in the adornment may not work. I had to replicate the padding code from here to ensure that the height of the adornment matches the height of the OutlinedInput:
<TextField
placeholder="With normal TextField"
sx={{
"& .MuiOutlinedInput-root": {
paddingLeft: 0
}
}}
InputProps={{
startAdornment: (
<InputAdornment
sx={{
padding: "27.5px 14px",
backgroundColor: (theme) => theme.palette.divider,
borderTopLeftRadius: (theme) =>
theme.shape.borderRadius + "px",
borderBottomLeftRadius: (theme) =>
theme.shape.borderRadius + "px"
}}
position="start"
>
kg
</InputAdornment>
)
}}
V5
V4
https://i.stack.imgur.com/QidRM.png
If you're looking for a straightforward solution, give this method a try
InputProps={{
startAdornment: (
<div style={{display:'flex',flexDirection:'column',justifyContent:'center',alignContent:'center', backgroundColor:'#E1E8EB',height:55,width:50,marginLeft:-13,border:'0px solid green',marginRight:5}}>
<InputAdornment position="start">
<VpnKeyIcon style={{marginLeft:10}} />
</InputAdornment>
</div>
)
}}
I am encountering an issue while trying to send an authorization header with a graphql request when a user signs up using my React app. Here is the flow: User signs up with Firebase, and the React app receives an id token. User is then redirected to ...
On my website, students have the ability to create their own notes using a RichText editor where the content can be quite complex. I want to provide them with an option to download these notes as a PDF file. To achieve this, I am planning to use the "puppe ...
I've encountered an issue while trying to import my redux store. When attempting to import the store, I received the following error message: ERROR: Unexpected token import firefox /Users/Name/Desktop/project/internal-dashboard/dashboard/src/store.j ...
Here is the code snippet I'm using: <style> a.item { border:1px solid #aaa; background:#ddd; padding:10px; ...
Currently, I am facing an issue with my camera and zoom components. They are separate because changing the state in the camera causes it to continuously reload. My problem lies in the fact that I am unable to find a way to pass the zoom variable to the cam ...
Situation: In a React component, I have a class with its own methods that is instantiated. What I'm needing: One of the methods in the class changes the value of an input (referred to as `this.$el`) using `.val()`. However, I need to pass this value ...
Recently, I came across a helpful code snippet for CKeditor that counts and ranks the most used words in a textarea. This feature is invaluable for generating SEO-keywords suggestions while writing articles. However, there is an issue with non-English char ...
I implemented a Lottie component in my loading.js file. Utilizing the App router (Next13). This is the code for the lottie component: import { Player } from '@lottiefiles/react-lottie-player'; import LoadingLottie from '@/assets/loading.j ...
Whenever I attempt to deploy on Vercel, I encounter this error in my log: Found next.config.js: /** * @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, webpack(config) { config.module.rules.push({ te ...
Working within a CSS Grid setup, I have an image on the left and a block of text on the right. As I reduce the page width, both the image and text resize accordingly to fit the page width. However, once the width goes below 475px, the layout breaks and the ...
https://i.stack.imgur.com/fMyZQ.jpg Hello there, this link appears normal before clicking on it. But once clicked, it moves to the top of the page like so: https://i.stack.imgur.com/yZ0R0.jpg You can clearly see the difference. I have also provided the c ...
I have a MaterialTable with many columns, and some of them are not always necessary to display. I am looking for a way to hide these columns unless the user specifically selects them. I attempted to use the hidden: true property in the column configuratio ...
I recently implemented a custom scrollbar for a component on my website. To determine the length of the scrollbar thumb, I use the formula viewportWidth / element.scrollWidth;. This provides me with a percentage value that I then apply to the thumb elemen ...
I am trying to extract data from an input field and use it to create a QR code. While passing the value as text works, I am facing issues with passing the actual input value. Does anyone have a straightforward example of this process? import React, {Comp ...
Struggling with styling this webpage. I aim to have my logo and search bar centered on the page, surrounded by ample space above and below. You can check it out at NE1UP dot com. All I want is a Google-style layout for my page, but I'm facing difficu ...
I am currently facing an issue with a site (a react app) deployed on GitHub pages. The site features cards that, when clicked on, should open a modal/dialog box. Ideally, clicking on the modal should close it. However, I have encountered a problem specific ...
I am seeking assistance with optimizing my website for mobile devices as it currently displays like the image below. Here are the solutions I have considered so far: Duplicating the 680 lines of CSS within the same document between @media only screen ta ...
I've been working on a website project using nodejs, expressjs, and pug as my template engine. I designed the home page in pure pug but ran into an issue when trying to add a background image to a specific section of the site. Despite double-checking ...
Is there a way to add text on a transparent background layer placed over an image without using the background-image property? In my case, I am working on an HTML Emailer and must utilize the img tag instead. Any suggestions on how to achieve this? < ...
I am having trouble customizing the styling of my icon. I've managed to change the background color successfully, but increasing the font size doesn't seem to work. I've tried using "!important" as I read, but it's not taking effect. It ...