如何将道具值发送到情感反应中的样式组件？

Question

我是 MUI 的新手并且有反应，我正在尝试制作输入文本框组件以重用它们，而不是每次都创建。

我正在尝试通过作为道具传递来设置 width 值。我怎样才能实现它。

InputText - 功能组件

import React from 'react'
import styled from '@emotion/styled'
import { Box } from '@mui/system'

type propsInputText ={
  width:string;
}

const TextBox = styled.input`
    width:${props => props.width? props.width : '30px;'}  
`

function InputText(props: propsInputText) {
  return (
    <TextBox />
  )
}

export default InputText

主页 - 组件

import InputText from '../Tools/TextBox/InputText';

<InputText width='200px' />

备注

不仅仅是设置宽度，我正在尝试将任何内容传递给样式化的组件，例如：颜色、字体大小、高度。

Answer 1

你想要这样的东西吗？

const InputBox = (props) => {
  const TextBox = styled.input(({ theme }) => ({
    width: props.width ? props.width : 200,
    color: props.color ? props.color : "blue",
    background: props.background? props.background : "yellow",
    height: props.height? props.height : 40
  }));
  return <TextBox />;
};

然后你可以这样实现它：

<>
    <InputBox width={100} color={"white"} background={"black"} height={"10"} />
    <InputBox />
</>

Answer 2

我找到了解决办法，我只是忘了在功能组件上传递参数，

type propsInputText ={
  width:string;
}

const TextBox = styled.input`
    width:${props => props.width? props.width : '30px;'}  
`

function InputText(props: propsInputText) {
    console.log("InputText Props = "+props.width);
    return (
          <TextBox width={props.width} />    //here I need to add the props
    )
}

export default InputText

如何将道具值发送到情感反应中的样式组件？

How to send props value to styled component in emotion react?

reactjs

material-ui

react-props