React中能否以自身/父组件CSS属性为条件设置动态样式？

一、同一styles对象内基于position设置top #

完全可以实现，核心是先确定position的取值，再通过条件判断给top赋值，逻辑清晰且直接。

示例1：基础条件判断 #

import { useDimension } from './your-hook-path';

function YourComponent() {
  const { width } = useDimension();
  // 根据width先确定position
  const position = width > 768 ? 'fixed' : 'relative';
  
  const componentStyles = {
    position: position,
    // 基于position的值动态设置top
    top: position === 'fixed' ? '20px' : 'auto',
    // 其他样式属性...
  };

  return <div style={componentStyles}>组件内容</div>;
}

示例2：复杂场景用映射表 #

如果position有多种可能，用对象映射更简洁：

import { useDimension } from './your-hook-path';

function YourComponent() {
  const { width } = useDimension();
  const position = width > 1200 ? 'absolute' : width > 768 ? 'fixed' : 'relative';
  
  // 提前定义不同position对应的top值
  const topValueMap = {
    absolute: '50%',
    fixed: '20px',
    relative: 'auto'
  };

  const componentStyles = {
    position: position,
    top: topValueMap[position] || 'auto', // 兜底值
  };

  return <div style={componentStyles}>组件内容</div>;
}

二、父组件样式复用给子组件 #

有三种常见的实现方式，根据你的项目技术栈选择：

方式1：通过props传递基础样式 #

父组件定义好包含position的基础样式，通过props传给子组件，子组件直接复用并扩展：

// 父组件
function ParentComponent() {
  const { width } = useDimension();
  const baseStyles = {
    position: width > 768 ? 'fixed' : 'relative',
    padding: '16px',
    border: '1px solid #eee'
  };

  return <ChildComponent baseStyles={baseStyles} />;
}

// 子组件
function ChildComponent({ baseStyles }) {
  // 复用父组件的position，自定义top值
  const childStyles = {
    ...baseStyles,
    top: baseStyles.position === 'fixed' ? '20px' : 'auto'
  };

  return <div style={childStyles}>子组件内容</div>;
}

方式2：CSS模块复用类名 #

如果项目用CSS模块，可将共用样式抽离到单独文件，父子组件导入复用：

/* shared-styles.module.css */
.base-position {
  position: relative;
  padding: 16px;
}

@media (min-width: 768px) {
  .base-position {
    position: fixed;
  }
}

// 父组件
import sharedStyles from './shared-styles.module.css';

function ParentComponent() {
  return <div className={sharedStyles['base-position']}>父组件内容</div>;
}

// 子组件
import sharedStyles from './shared-styles.module.css';
import { useDimension } from './your-hook-path';

function ChildComponent() {
  const { width } = useDimension();
  const childInlineStyles = {
    top: width > 768 ? '20px' : 'auto'
  };

  return (
    <div 
      className={sharedStyles['base-position']} 
      style={childInlineStyles}
    >
      子组件内容
    </div>
  );
}

方式3：Styled Components样式继承（CSS-in-JS场景） #

如果用styled-components这类CSS-in-JS方案，可通过样式继承实现复用：

import styled from 'styled-components';
import { useDimension } from './your-hook-path';

// 定义基础样式组件，包含动态position逻辑
const BaseContainer = styled.div`
  position: ${props => props.width > 768 ? 'fixed' : 'relative'};
  padding: 16px;
`;

// 子组件继承基础样式，添加top的动态逻辑
const ChildContainer = styled(BaseContainer)`
  top: ${props => props.width > 768 ? '20px' : 'auto'};
`;

function YourComponent() {
  const { width } = useDimension();
  return <ChildContainer width={width}>子组件内容</ChildContainer>;
}

内容的提问来源于stack exchange，提问作者Sifat Amin