diff --git a/packages/react-components/src/Backdrop/backdrop.tsx b/packages/react-components/src/Backdrop/backdrop.tsx index a12df1fa..f5419d62 100644 --- a/packages/react-components/src/Backdrop/backdrop.tsx +++ b/packages/react-components/src/Backdrop/backdrop.tsx @@ -33,10 +33,14 @@ export type BackdropProps = BackdropOwnProps * */ +const reactPropsRegex = /^(as|open|invisible|transitionDuration|variant)$/; + /** * Styles. */ -const BackdropRoot = styled(Box)>>((props) => ({ +const BackdropRoot = styled(Box, { + shouldForwardProp: (prop) => !reactPropsRegex.test(prop), +})>>((props) => ({ zIndex: -1, position: 'fixed', right: 0, diff --git a/packages/react-components/src/Box/box.tsx b/packages/react-components/src/Box/box.tsx index f9f61786..901e16b7 100644 --- a/packages/react-components/src/Box/box.tsx +++ b/packages/react-components/src/Box/box.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import styled from '@emotion/styled'; -import isPropValid from '@emotion/is-prop-valid'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; import { ColorType } from '../styles'; @@ -34,11 +33,13 @@ export type BoxProps< * */ +const reactPropsRegex = /^(as|background|borderColor|borderWidth|borderStyle|borderPosition|borderRadius)$/; + /** * Styles. */ const BoxRoot = styled('div', { - shouldForwardProp: (prop) => isPropValid(prop), + shouldForwardProp: (prop) => !reactPropsRegex.test(prop), })( (props) => ({ background: props.background && `var(--pv-color-${props.background})`, diff --git a/packages/react-components/src/LinearProgress/linear_progress.tsx b/packages/react-components/src/LinearProgress/linear_progress.tsx index 639307b7..26f63745 100644 --- a/packages/react-components/src/LinearProgress/linear_progress.tsx +++ b/packages/react-components/src/LinearProgress/linear_progress.tsx @@ -61,6 +61,7 @@ export const LinearProgress = React.forwardRef { const { color, + variant, ...other } = props; diff --git a/packages/react-components/src/Skeleton/skeleton.tsx b/packages/react-components/src/Skeleton/skeleton.tsx index f2fe2534..d8e09986 100644 --- a/packages/react-components/src/Skeleton/skeleton.tsx +++ b/packages/react-components/src/Skeleton/skeleton.tsx @@ -42,6 +42,8 @@ export type SkeletonProps< * */ +const reactPropsRegex = /^(as|height|width|variant)$/; + /** * Styles. */ @@ -58,7 +60,7 @@ const pulseKeyframe = keyframes` `; const SkeletonRoot = styled(Box, { - shouldForwardProp: (prop) => !['width', 'height'].includes(prop), + shouldForwardProp: (prop) => !reactPropsRegex.test(prop), })((props) => ({ display: 'block', height: '1.2em', diff --git a/packages/react-components/src/Typography/typography.tsx b/packages/react-components/src/Typography/typography.tsx index 222a392e..5181c9f1 100644 --- a/packages/react-components/src/Typography/typography.tsx +++ b/packages/react-components/src/Typography/typography.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import styled from '@emotion/styled'; -import isPropValid from '@emotion/is-prop-valid'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; import { ColorType, @@ -45,11 +44,13 @@ export type TypographyProps< * */ +const reactPropsRegex = /^(as|color|variant|noWrap)$/; + /** * Styles. */ const TypographyRoot = styled('p', { - shouldForwardProp: (prop) => isPropValid(prop) && prop !== 'color', + shouldForwardProp: (prop) => !reactPropsRegex.test(prop), })((props) => ({ margin: 0, color: props.color === 'inherit' ? 'inherit' : `var(--pv-color-${props.color})`,