0
196
ViewsHow to add attribute to parent div with ClassName in ReactJS?
I'm using ReactJS material UI tabs navigation. I want to add one attribute named tabindex in one div with class=MuiTabs-flexContainer MuiTabs-centered having value -1 to its child nodes. I had tried but tabindex=-1 is getting added to somewhere else:
Here in this screenshot, I need tabindex=-1 in its child nodes i.e., button elements:
Here is the UI tabs part:
<Tabs value={value} id="tabSec">
<Tab
label={
<span className={value === 0 ? "active-tab" : "custom-style-on-tab"}>
ABC
</span>
}
/>
<Tab
label={
<span className={value === 1 ? "active-tab" : "custom-style-on-tab"}>
XYZ
</span>
}
/>
</Tabs>;
The function which I have done so far is:
const tabRoving = (element) => {
element.addEventListener("keydown", function (e) {
if (e.keyCode === 13) {
if (element.contains(document.activeElement)) {
element.childNodes.forEach(function (childElement) {
if (childElement != document.activeElement) {
childElement.setAttribute("tabindex", "-1");
console.log("done");
} else childElement.setAttribute("tabindex", "0");
});
}
}
});
};
useEffect(() => {
tabRoving(document.getElementById("tabSec"));
}, []);
How can I achieve this? Is this possible in ReactJS with material UI?
1 answers
Answer question0
Have you tried passing a tabIndex={-1} prop on the Tab component? It should spread unused props down, eventually to the button.
Inheritance
While not explicitly documented above, the props of the ButtonBase component are also available on Tab. You can take advantage of this to target nested components.
Props supplied to a component which are not explicitly documented are spread to the root element; for instance, the
classNameprop is applied to the root.
Pass a tabIndex prop to the Tab components:
<Tabs value={value} id="tabSec">
<Tab
tabIndex={-1}
label={
<span className={value === 0 ? "active-tab" : "custom-style-on-tab"}>
ABC
</span>
}
/>
<Tab
tabIndex={-1}
label={
<span className={value === 1 ? "active-tab" : "custom-style-on-tab"}>
XYZ
</span>
}
/>
</Tabs>