Question 225577 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Self-created <Tab/> component is not work with "&.Mui-selected"

I have created a custom <Tab/> and I would like to control its selected-color by using

Sandbox demo code

export const Tab = styled(MuiTab)({
  "&.Mui-selected": {
    color: "red"
  }
});

However, I found that:

1.apply the self-styled component directly => selected-color = red

2.wrap the self-styled component by a self-created component => not working, even no default selected-color

<Tabs value={value} variant="scrollable">
  <Tab label="Tab" value={1} /> //selected color = default
  <TestTab label="TestTab" value={2} /> //selected color = default (Problem here)
  <Styled.Tab label="Styled.Tab" value={3} /> //selected color = red (Good one but I want to wrap in self-created component)
</Tabs>

Is that a normal behavior which MUI does not recognize a self-created Tab?

Tags:

2

Answers


  1. 0

    how about creating a wrapper component that renders your self-styled Tab component TestTab like this instead of using the Styled.Tab

    const TestTab = (props) => {
  return <Tab {...props} />;
};
    Login or Signup to reply.
  2. 0

    The solution of @raman is right.
    I’ve edit on your codesandbox:

    import { Tabs, Tab } from "@mui/material";
import * as Styled from "./styles";

export default function TestTab({ label, value, ...props }) {
  return (
     <Styled.Tab {...props} value={value} label={label} />
  );
}

    Edit geocoding-demo (forked)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search