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

Aligning UL LI elements vertically for multi-line textORHow to vertically

I am dealing with a ul list that contains both single and multi-line li text. The issue is that the second line of the multi-line text starts at a different indentation than the first line. I need a simple solution to resolve this problem that works seaml ...

htmlcss

Having difficulty locating audio files within a Next.js project

I am facing challenges when trying to import my audio files into a redux slice. Currently, I am attempting to retrieve my audio files from the app > public > audio directory. I have made efforts to access my audio files through 2 different director ...

javascriptreactjsnext.jsaudioredux

In the Next.js environment, the utilization of chartjs's cutoutPercentage and tooltips features may not

For my next.js project, I am utilizing the react-chartjs-2 library to generate charts. I have encountered an issue where the cutoutPercentage property in chart.js, which is supposed to make the donut chart thinner, does not seem to work properly in next. ...

reactjsnext.jschart.jsreact-chartjs-2

Tips for eliminating unnecessary data in written content

Could anyone provide a recommended method for removing unnecessary symbols from text strings? For instance, transforming "CWC%20-%20Maint%20Eng%20-%20El" into the more readable format of "CWC - Maint Eng - El". ...

javascript

Overcoming Troublesome Login Input Box in Web

In an effort to streamline tasks in our office, I am working on automating certain processes. Specifically, this program is designed to log into our insurance company's website and extract information for payroll purposes. Below is the code snippet th ...

javascripthtmlexcelvbaautomation

Tips for updating the background color of a dropdown menu in the navigation bar

I am attempting to increase the size of the dropdown menu and change its background color. Currently, I can only modify the color of the links and the surrounding area. .navbar a { width: 125px; text-align: center; ...

htmlcssbootstrap-4

Develop an asynchronous thunk that may lose its context if it is returned from different functions

Looking to consolidate 3 large thunks into one with parameters, I aim to create a createAsyncThunk function wrapper. Here's my approach: Code export const getExportThunk = <T>( handler: (args: T) => Promise<boolean>, route: string, ...

reactjsreduxthisredux-thunkredux-toolkit

Having trouble parsing a JSON object using the fetch method in React while trying to retrieve data from my database

While using fetch with the "get" method, I encountered an issue where passing the response from my SQL database to my object using useState results in an empty object. However, when I print the response data from my database through console logs, it shows ...

javascriptreactjs

Error in linking PHP code to display stored tweets using HTML code

![enter image description here][1]![image of output of twitter_display.php][2] //htmlsearch.html file <!doctype html> <html> <head> <title>Twitter</title> <meta charset="utf-8"> <script> window.onload = function ...

javascriptphpjqueryhtmltwitter

Is there a advantage to using Angular's component style encapsulation for improved performance?

Recently, I came across the styling methods of Angular 2 which allows you to directly include your styles within the component. If you want to explore more on this topic, check out loading styles. There are two options for style encapsulation in Angular 2 ...

cssangularsassencapsulation

strange occurrences of bootstrap.min.css.map popping up

While working on my e-commerce website using Node, Express, Mongoose, and Bootstrap, I encountered an unexpected issue related to "bootstrap.min.css.map". The error 'Cast to ObjectId failed for value "bootstrap.min.css.map" at path "_id" for model " ...

htmlcssnode.jsexpressbootstrap-4

In React, the `context` is consistently an empty object

I am facing an issue while trying to establish a context in my React App. For some reason, I am unable to access context from the children components. Here is the parent component: import React from 'react' import MenuBar from './MenuBar.js ...

javascriptclassreactjsecmascript-6

Deactivate Pagination with a Button-Based Approach

After conducting thorough research online, I have experimented with various approaches but unfortunately, none have proven successful. view image description here I am seeking guidance on how to disable pagination when clicking on the replace button. Due ...

htmlcssangularjs

Error: Module not found - Unable to locate 'web-vitals' in the directory '/app/src'

While everything runs smoothly on my local computer, I encountered an error after deploying my react app on Heroku. Here are the steps I have taken so far: Installed web-vitals using npm install --save-dev Deleted node modules and reinstalled npm package ...

reactjs

Is it possible to pause and resume animation in React Native?

onAnimation(){ var animation = Animated.timing(this.state.spin,{ toValue:1, duration:4000, easing:Easing.linear }); animation.start(); } onPause(){ this.state.spin.stopAnimation(); } Exploring the world of animati ...

reactjsreact-native

Can we implement attribute selectors in Material-UI while utilizing makeStyles?

Is it possible to extract all the div elements with specific Mui class names such as access-MuiPickersCalendarHeader-switchHeader, access-MuiPickersDay-day? My components are styled using StylesProvider which adds "access" as a prefix to the original Mater ...

javascriptcssreactjsmaterial-ui

Ways to substitute numerous instances of a string in javascript

I have experience in developing websites using reactjs. I usually implement restAPI's with java and work with liferay CMS. In one of my projects, I created a shortcode for accordion functionality like this: ('[accordion][acc-header]Heading 1[/ac ...

javascripthtmlreactjsliferay

What is the best way to update an existing cookie value using angularjs?

Currently, I am working with AngularJS. When a button is clicked, I am setting a cookie and it works perfectly fine. However, when the page is refreshed and another button click occurs, a new value is stored in the array while the old cookie value becomes ...

javascriptjqueryhtmlangularjs

Disappearing text with HTML Bookmark and CSS Overflow:Hidden - What's happening?

Within the header of my webpage, there is an image div that has been styled with overflow:hidden. Inside the content section, I have a bookmark anchor tag: <a name="arghargh"></a> Located at the top of the content area, there is a link that ...

htmlcssbookmarks

Utilizing Leaflet to Ensure Polylines Align with Roads

I have a scenario where I am loading markers from a database and then connecting them with a polyline to calculate the overall distance. This approach saves me from having to calculate the distance between each pair of markers individually. However, I&apo ...

javascriptjqueryleaflet