为了账号安全,请及时绑定邮箱和手机立即绑定

如何使用带样式的组件在条件下将边距应用于 div 并做出反应?

如何使用带样式的组件在条件下将边距应用于 div 并做出反应?

繁华开满天机 2023-01-06 09:45:59

我想使用 react 和 typescript 根据样式组件的道具应用边距。


下面是我的代码,


function Parent() {

    return (

        <Child margin='variant'/>

    );

}


interface Props {

    margin?: any;

}


function Child({margin}: Props) {

    return (

        <Wrapper margin={margin}/>

    );

}


const Wrapper = div<{margin: any;}>`

   margin: 0 4px; //usually a margin of 0 4px should be used. if this child is called from parent 

   //component then it should use 0 4px 4px 8px;


`;

该子组件在两个组件中使用,一个在父组件中,另一个在子组件中。


当从父组件调用此子组件时,它应该使用 0 4px 4px 8px 的边距,如果不是,则应该使用 0 4px 的边距。


我该如何修改上面的代码。有人可以帮我解决这个问题吗?谢谢。


查看完整描述

1 回答

?
慕姐8265434

TA贡献1536条经验 获得超2个赞

你需要传递道具

我想使用 react 和 typescript 根据样式组件的道具应用边距。


下面是我的代码,


function Parent() {

    return (

        <Child margin='variant'/>

    );

}


interface Props {

    margin?: any;

}


function Child({margin}: Props) {

    return (

        <Wrapper margin={margin}/>

    );

}


const Wrapper = div<{margin: any;}>`

   margin: 0 4px; //usually a margin of 0 4px should be used. if this child is called from parent 

   //component then it should use 0 4px 4px 8px;


`;

该子组件在两个组件中使用,一个在父组件中,另一个在子组件中。


当从父组件调用此子组件时,它应该使用 0 4px 4px 8px 的边距,如果不是,则应该使用 0 4px 的边距。


我该如何修改上面的代码。有人可以帮我解决这个问题吗?谢谢。


查看完整回答
反对 回复 2023-01-06
  • 1 回答
  • 0 关注
  • 8 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信