CODEWITHSUNDEEP
material-ui
psvj
psvj

Reputation: 8840

How to remove focused highlight in React material-ui Tab Component?

I am using a Tab component from the react Material-ui library. The tab appears with this weird outline on the left and right borders when the Tab element is in focus.

Is there any way to remove this active / focus outline?

Below is an image of the weird focus styling in question

enter image description here

My code is below:

import { Fragment } from 'react';
import styled from 'styled-components'
import Card from 'components/Elements/Card';
import CardItem from 'components/Elements/CardItem';
import CreateAccountForm from 'components/Forms/CreateAccount/container';
import { withTheme } from 'styled-components';
import { Container, Row, Col } from 'styled-bootstrap-grid';
import { pure } from 'recompact';

import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import { withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';

import OpenModalButton from 'components/Modal/OpenModalButton/container';

const styles = theme => ({
  indicator: {
    backgroundColor: "red",
    border: '5px solid blue !important',
    '&:active': {
      outline: 'none',
    },
    '&:focus': {
      outline: 'none',
    }
  },
  selected: {
    backgroundColor: 'blue',
  },
  wrapper: {
    border: '5px solid blue',
  }
});

import { LogoElement } from 'components/Elements/Icons';

const StyledCard = styled(withTheme(Card))`
  border: 15px solid ${ props => props.theme.colors.blue[3]};
  text-align: left;
  border-radius: 3px;
  padding-top: ${ props => props.theme.spacer[2]};
  padding-bottom: ${ props => props.theme.spacer[2]};
  position: relative;
  width: 98%;
  max-width: 1250px;
  min-height: 600px;
  display: flex;
  align-items: flex-start;

  h5 {
    color: ${ ({ theme }) => theme.colors.orange[3]};
  }
`;

const CloseButton = styled.a`
  transform: rotate(45deg);
  font-size: 50px !important;
  border: none !important;
  position: absolute;
  top: -20px;
  right: 5px;
  color: ${ props => props.theme.colors.blue[3]} !important;
  font-weight: 200 !important;
  &:hover{
    text-decoration: none;
  }
`;

const LogoContainer = styled.div`
  position: absolute;
  top: 10px;
  left: 15px;
  width: 45px;
  height: 100%;

  svg, path, g, polygon, rect {
    fill: ${ props => props.theme.colors.orange[1]} !important;
  }
`;

const Renderer = ({ handleClose, className, classes, handleTabChangeClick }) => {
  return (
    <StyledCard>
      <CloseButton href="#" onClick={handleClose}>+</CloseButton>
      <CardItem>
        <Container>
          <Row>
            <Col>
              <Tabs
              variant="fullWidth"
              onChange={handleTabChangeClick}
              >
                <Tab label="Profile" />
                <Tab label="Activity" />
                <Tab label="Score" />
                <Tab label="Edit" />
              </Tabs>
            </Col>
          </Row>
        </Container>
      </CardItem>
    </StyledCard>
  );
};

export default withStyles(styles)(Renderer);

Upvotes: 9

Views: 22683

Answers (5)

Sanjay Gupta
Sanjay Gupta

Reputation: 91

'&.Mui-focused fieldset': {
      borderWidth: '1px',
},

Try this selector to remove the border/outline

Upvotes: 0

Santhosh Kumar R
Santhosh Kumar R

Reputation: 1

If you are facing the issue in a textarea in MUI, add the following to the inline style:

--Textarea-focusedHighlight":"none"

For instance,

<Textarea maxRows={10} style={{"--Textarea-focusedHighlight":"none"}}  placeholder="Write your answers here" />

Upvotes: 0

Kiran Poojary
Kiran Poojary

Reputation: 233

This solved my issue.

<Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
        <Tab sx={{
            '&.Mui-selected': {
                outline: 'none',
            }
        }}
            label="Item One" />
        <Tab sx={{
            '&.Mui-selected': {
                outline: 'none',
            }
        }} label="Item Two" />
        <Tab sx={{
            '&.Mui-selected': {
                outline: 'none',
            }
        }}
            label="Item Three" />
    </Tabs>

Upvotes: 1

msrc
msrc

Reputation: 785

You have to override Mui-selected class.

    '&.Mui-selected': {
      outline: 'none',                                                                   
    }

See https://material-ui.com/api/tab/#css for classes defined for tab.

Upvotes: 5

jehillert
jehillert

Reputation: 452

I had the same problem. Try changing:

    '&:active': {
      outline: 'none',
    },

To:

    '&:hover': {
      outline: 'none',
    },

I use styled-components to override material-ui styling, so my setup is a little different, but the solution should be the same.

Upvotes: 7

Related Questions