Unable to adjust the border radius of a filled text-field variant in Material-ui-core

Situation at Present 🤔

The component I am currently working with looks like this: 

export const BirthdayTextFields = styled(TextField)`
  width: 80px;
  margin-right: 10px;
  border-radius: 50px;
`;

Here is how I am using it: 

<BirthdayTextFields
                      id="filled-dense-hidden-label"
                      margin="dense"
                      hiddenLabel
                      variant="filled"
                      placeholder="18"
                      inputProps={{ 'aria-label': 'dense hidden label' }}
                      onChange={this.handleChange('day')}
                    />

However, due to the "filled" variant, I am unable to set the border-radius. To work around this issue, I tried overriding the TextField Component rule using the following method: 

export const TextFieldWrapper = styled(TextField)`
  fieldset {
    border-radius: 50px;
  }
`;

By using the overridden style in a similar way, but with the variant set to "outlined", I was able to make it work successfully.

<TextFieldWrapper
                  id="outlined-dense"
                  label="Last name"
                  margin="dense"
                  variant="outlined"
                  onChange={this.handleChange('lastName')}
                />

How can we address this issue effectively? I also attempted to add the fieldset value to BirthdayTextFields, but because of the "filled" variant, it did not have much effect.

export const BirthdayTextFields = styled(TextField)`
  width: 80px;
  margin-right: 10px;
  fieldset {
    border-radius: 50px;
  }
`;

Technical Specifications

Operating System: Windows 10

Technology and Versions:

- Material-UI: ^3.9.3

- React: ^16.8.6

Web Browser: Chrome

javascriptcssreactjsmaterial-uistyled-components

Answer â„–1

Have you experimented with the <FilledInput> component?

const useStyles = makeStyles(theme => ({
  root: {
    borderRadius: "50px 50px 0 0"
  },
  container: {
    display: "flex",
    flexWrap: "wrap"
  },
  textField: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1)
  }
}));

export default function FilledTextFields() {
  const classes = useStyles();
  const [values, setValues] = React.useState({
    name: "Cat in the Hat",
    age: "",
    multiline: "Controlled",
    currency: "EUR"
  });

  const handleChange = name => event => {
    setValues({ ...values, [name]: event.target.value });
  };

  return (
    <form className={classes.container} noValidate autoComplete="off">
      <FilledInput
        id="filled-name"
        label="Name"
        className={classes.textField}
        value={values.name}
        onChange={handleChange("name")}
        margin="normal"
        variant="filled"
        classes={{
          root: classes.root
        }}
      />
    </form>

https://codesandbox.io/embed/material-demo-sos7s

Answer â„–2

I couldn't access the container with the outline, so I opted for using CSS instead.

<TextField className="inputRounded" placeholder="Search" variant="outlined" />

Afterwards, I included the border-radius code in the project's index.css file.

.inputRounded .MuiOutlinedInput-root{
   border-radius: 50px;
}

Answer â„–3

const styles = makeStyles({
   container: {
      [`& fieldset`]: {
            borderRadius: 15,
      },
   },
});

<TextField
  className={styles.container}
  id="roundedInput"
  label="Enter your email"
  variant="outlined"
  fullWidth
/>

Answer â„–4

To discover the specific slot for the component you wish to customize, utilize the browser development tools. After identifying the slot, create a CSS file containing the class you intend to modify.

If needed, employ the following to enforce the class:

!important

File: styles.css

.css-1q6at85-MuiInputBase-root-MuiOutlinedInput-root{
    border-radius: 50px!important;
}

Answer â„–5

It was successful in my case, following these steps is essential include the code snippet below inside sx={} within TextField component

 '& .MuiOutlinedInput-root': {
   '& fieldset': {
     borderColor: 'black',
     borderRadius: 2,
      },
    },

Answer â„–6

To change the default border radius from "4" to "0", you must utilize CreateTheme and modify shape.borderRadius accordingly.

import { createTheme, ThemeProvider } from '@mui/material' 
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

const el = document.getElementById('root')
const root = ReactDOM.createRoot(el)

const theme = createTheme({
   shape: {
      borderRadius: 0,
   },
})

console.log(theme)
root.render(
   <ThemeProvider theme={theme}>
      <App />
   </ThemeProvider>
)

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

Navigating in AngularJS with various URL parameters

Within my application, I am in need of using routes that require multiple attributes from the URL to be passed into PHP. The current setup that is functioning correctly is as follows: .when('/jobs/:type', { templateUrl: function(attrs){ ...

javascriptangularjsroutes

What steps should I take to modify this recursive function so that it can verify the property name of an object?

I stumbled upon the code snippet below online, which effectively and recursively eliminates properties from an object if their values are null, undefined, or 0 const removeEmpty = (obj) => { Object.keys(obj).forEach(key => (obj[key] & ...

javascriptjson

The ".splice()" method continuously removes the final element from an array

I have implemented a function on my form that allows me to add multiple file inputs for various images by clicking a button. Although this functionality is working correctly, I am facing an issue while trying to delete an input field using .splice. Instead ...

javascriptvue.jsnuxt.js

Is it recommended to create model classes in React components?

Within the realms of React, the Flux architecture is utilized. According to https://reactjs.org/docs/thinking-in-react.html, React operates with two distinct models - namely, the state and props. There are recommendations provided for model management in ...

javascriptreactjsclassreact-nativeflux

View the selected radio buttons and checkboxes next to each other in real-time before finalizing and submitting

Within my form, individuals have the option to select from radio buttons and checkboxes. The challenge is that I need to display the chosen data on the page before they enter their email and submit! Since I cannot refresh the page, PHP won't work for ...

javascriptphpjqueryhtmlajax

Tips for avoiding accidentally selecting nearby text while holding down a button on your mobile device

My application requires the user to press and hold a button to record audio. However, on mobile devices, when the user holds the button, the browser attempts to select nearby text due to finger pressure. While this behavior is understandable, I want to pre ...

javascripthtmlcssreactjsmaterial-ui

Angular material table featuring custom row design

My team is working with a large table that is sorted by date, and we are looking to add some guidance rows to help users navigate through the data more easily. The desired structure of the table is as follows: |_Header1_|_Header2_| | 25/11/2018 | ...

javascriptangularangular-materialmaterial-designangular-material2

Adjust a Javascript script to choose the best font color for use in R Shiny applications

I am currently seeking to determine the font color of hover messages based on the background color. This means white if the background is dark, and black if it is light. However, I stumbled upon a Stack Overflow question with a Javascript solution that see ...

javascriptrshiny

Is the 404 page being utilized as a fallback for AJAX requests?

I am looking to create a one-page website that utilizes history.pushstate to modify the URL. My plan involves having only one HTML file for the site, which would be the 404 error page. This setup would redirect users to that page regardless of the URL they ...

javascriptajaxhttphttp-status-code-404

The behavior of CSS position: sticky varies depending on whether the user is scrolling up or scrolling down

I am experiencing an issue in my Vue CLI app where a component with the position: sticky CSS property is being partially hidden under the top of the browser when scrolling down, but works correctly when scrolling up. This behavior is also observed on my Ga ...

javascriptcssvue.jscss-positionvuex

Encountering a deployment issue while trying to launch a NextJs app on Amplify

I'm encountering issues while trying to deploy my NextJs app on AWS Amplify. Here's a snippet from my package.json: { "name": "bytecho", "version": "0.1.0", "private": true, "scripts ...

reactjsamazon-web-servicesaws-amplifynext.js13

Troubleshooting the issue: Incompatibility between jQuery .focus() and dynamically generated list items from ng-repeat in AngularJS

I am currently working on enhancing the keyboard accessibility of a website, specifically focusing on making a dropdown menu accessible via keyboard. I am attempting to establish focus on the element with the id= list-0. Below is the HTML code snippet: & ...

javascriptjqueryangularjs

The implementation of useEffect can lead to the overwriting of states in the parent component

My attempt was to create a wizard that triggers a REST call to update the object with each step. Within my code, there is a ParentComponent responsible for storing data changed in a form located in the ChildComponent. I came across a use case of useEffect ...

reactjs

Learn how to obtain a response for a specific query using the `useQueries` function

Can we identify the response obtained from using useQueries? For instance, const ids = ['dg1', 'pt3', 'bn5']; const data = useQueries( ids.map(id => ( { queryKey: ['friends', id], queryFn: () =&g ...

javascriptreactjsreact-query

What is the best way to retrieve promiseValue from the response array?

I've run into some challenges while using Promise.all() for the first time with two get-methods. When I check the response in my console log, I can see the data I'm trying to fetch under promiseValue. However, I'm unsure of how to access it. ...

javascriptvue.jspromisegetfetch

Incorporating an npm reference into a personalized node within Node-RED

As a novice in both the NodeRed and NodeJs/npm realms, I am embarking on the journey of creating a custom node for the first time. Despite my efforts to follow the official documentation on Creating your first node, I seem to have hit a roadblock. Everyth ...

javascriptnode.jsnode-red

I've been attempting to relocate a CSS element at my command using a button, but my previous attempts using offset and onclick were unsuccessful

I am trying to dynamically move CSS items based on user input or button clicks. Specifically, I want to increment the position of elements by a specified number of pixels or a percentage of pixels. Currently, I am able to set the starting positions (top a ...

javascriptjqueryhtmlcssajax

The system encountered an error: Module could not be located - Unable to resolve '@material-ui/icons/VideoCall'

Having trouble installing even with --force option, looking for a solution import { Container, MenuItem, Select, InputLabel } from '@material-ui/core'; In need of assistance to resolve these installation errors Error: Module not found - Can&ap ...

reactjsnode.jsnpmmaterial-ui

Optimal method for organizing individuals into teams using Google Apps Script

There are approximately 200 individuals in this particular department. Our goal is to form groups of 4, with each group consisting of members from different teams based in the same city. Each group must have one driver and three non-drivers, all sharing si ...

javascriptgoogle-apps-scriptgoogle-sheets

Button color changes upon submission of form

Can anyone help me figure out how to change the color of a submit button after a form submission using Twitter Bootstrap 3? I have a form with multiple buttons serving as filters for my product page, but I can't seem to change the color of the selecte ...

javascriptphpjqueryhtmlinput