fix: prevent non-boolean 'active' prop from being forwarded to DOM (#8534)

Fixes: #8533
This commit is contained in:
Harsh Singh
2024-11-18 00:41:13 +05:30
committed by GitHub
parent badebc513f
commit 9134ed8ce4

View File

@@ -1,3 +1,4 @@
import isPropValid from '@emotion/is-prop-valid';
import { useTheme } from '@emotion/react'; import { useTheme } from '@emotion/react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { ReactElement } from 'react'; import { ReactElement } from 'react';
@@ -16,11 +17,9 @@ type TabProps = {
to?: string; to?: string;
}; };
const StyledTab = styled.button<{ const StyledTab = styled('button', {
active?: boolean; shouldForwardProp: (prop) => isPropValid(prop) && prop !== 'active',
disabled?: boolean; })<{ active?: boolean; disabled?: boolean; to?: string }>`
to?: string;
}>`
align-items: center; align-items: center;
border-bottom: 1px solid ${({ theme }) => theme.border.color.light}; border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
border-color: ${({ theme, active }) => border-color: ${({ theme, active }) =>