使用其自身或父级的css属性作为REACT中的条件在样式中添加条件

vnzz0bqm 于 2022-12-24 发布在 React

关注(0)|答案(2)|浏览(203)

最近，我在一个React项目中工作，它让我想到是否可以使用react样式属性作为条件。
以下是我的工作代码\

const {_,width} = useDimensionHook()
<Component
     styles={{
       position: width < 991 ? "absolute" : "fixed",
       top: width < 991 ? 0 : 42
     }}
/>

我想知道的是我是否能做到，

const {_,width} = useDimensionHook()
<Component
     styles={{
       position: width < 991 ? "absolute" : "fixed",
       top: position == 'absolute' ? 0 : 42 
          // using css property **position** inside same styling
     }}
/>

我需要你的建议。也许先申请家长，然后再使用其子女的风格。但我不知道确切的答案。需要你的帮助

谢谢 *

css

来源：https://stackoverflow.com/questions/74858974/adding-condition-in-styling-using-its-own-or-parents-css-property-as-condition

2条答案

按热度按时间

jogvjijk1#

您可以在常量中设置样式，然后使用该常量检查其值是否符合您的条件
像这样：

const {_,width} = useDimensionHook()
  const componentStyles = {
    position: width < 991 ? 'absolute' : 'fixed',
  };

  return (
    <Component
      styles={{
        ...componentStyles,
        top: componentStyles.position == 'absolute' ? 0 : 42,
      }}
    />
  );

赞(0）回复(0）举报 2022-12-24

e5njpo682#

你可以简单地将position的计算值存储在一个变量中，然后在一个三元语句中使用它，最重要的是，你可以利用useMemo返回一个记忆值：

const {_,width} = useDimensionHook();
const myCustomStyles = useMemo(() => {
     const position = width < 991 ? 'absolute' : 'fixed';

     return {
          position,
          top: position === 'absolute' ? 0 : 42,
     }
}, [width]);

<Component styles={myCustomStyles} />

赞(0）回复(0）举报 2022-12-24

我来回答

使用其自身或父级的css属性作为REACT中的条件在样式中添加条件

2条答案

相关问题

热门标签

最新问答