javascript - React does not recognize the prop passed to a styled-component within Material UI
问题描述
Styled-component:
import { Typography } from '@material-ui/core';
const Text = styled(Typography)<TextProps>`
margin-bottom: 10px;
color: ${({ textColor }) => textColor ?? textColor};
font-size: ${({ textSize }) => (textSize ? textSize + 'px' : '16px')};
`;
Usage inside a component:
<GlobalStyled.Text textColor="green" textSize="20">test</GlobalStyled.Text>
"Warning: React does not recognize the textColor
prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase textcolor
instead. If you accidentally passed it from a parent component, remove it from the DOM element."
Props are passed to a Typography
component itself, not just for styled-component, how to workaround this?
UPDATE
Styled components released 5.1.0: https://github.com/styled-components/styled-components/releases/tag/v5.1.0
There's new transient props now, that solves this problem with props filtering. You can use $propsName
, a dollar sign before your props name and it will be passed to a Styled-component ONLY!
解决方案
You will need to get the props that you don't want, strip them, and pass the rest of the inside:
const Text = styled( ({textColor, textSize, ...rest}) => <Typography {...rest}/>)<TextProps>`
margin-bottom: 10px;
color: ${({ textColor }) => textColor ?? textColor};
font-size: ${({ textSize }) => (textSize ? textSize + "px" : "16px")};
`;
Here is a working example (without the TextProps
type, but it should work): https://codesandbox.io/s/mui-styled-component-removed-props-rfdjx?file=/src/App.js
Here is a working example using Typescript:
import * as React from "react";
import Typography, {TypographyProps} from '@material-ui/core/Typography';
import {StylesProvider} from '@material-ui/core/styles';
import styled from 'styled-components';
interface TextProps extends TypographyProps {
textColor: string,
textSize: number
}
const TypographyWrapper = React.forwardRef<HTMLSpanElement, TextProps>(
function TypographyWrapper({textColor, textSize, ...other}: TextProps, ref) {
return <Typography {...other} ref={ref}/>
}
);
const Text = styled(TypographyWrapper)<TextProps>`
margin-bottom: 10px;
color: ${({ textColor }: TextProps) => textColor ?? textColor};
font-size: ${({ textSize }: TextProps) => (textSize ? textSize + 'px' : '16px')};
`;
export default function App() {
return <StylesProvider injectFirst>
<Text textColor="green">Hello World!</Text>
<Text textColor="red" textSize={30}>Hello World!</Text>
</StylesProvider>;
}
推荐阅读
- java - 如何在java中以最有效和最优雅的方式使用并行处理
- momentjs - 通过时刻转换为 UTC 时,时间缩短一小时 - utcOffset 不起作用
- laravel - Eloquent Query:所有具有相同类别的新闻。数据透视表
- node.js - 通过 npm 安装程序使用 nodejs 安装 React.js 代码后未运行
- javascript - 计算 Kintone 中的单选按钮值
- swift - 在 SwiftUI 中动态隐藏视图
- laravel-5 - strpos() 期望参数 1 是字符串,给定数组 - 当我进行雄辩的查询时
- vhdl - 我对 vhdl 中的当前时间有一些疑问
- c++ - 如何计算 C++ std::map 中不同值的数量
- google-cloud-functions - 使用 Node.js 从 Cloud Functions 读取 Cloud Bigtable 需要 > 1500 毫秒