求助：如何根据用户登录状态为Main组件设置差异化样式

1. 条件拼接类名（最常用原生方案） #

如果使用普通CSS或全局样式表，直接通过登录状态判断给组件添加对应类名：

import './Main.css';

function Main({ isLoggedIn }) {
  // 拼接基础类与状态专属类
  const mainClass = `main-container ${isLoggedIn ? 'main-logged-in' : 'main-logged-out'}`;
  
  return <div className={mainClass}>这是Main组件内容</div>;
}

对应的CSS代码：

.main-container {
  padding: 20px;
  transition: all 0.3s;
}
.main-logged-in {
  background-color: #f0f9ff;
  border: 1px solid #7dd3fc;
}
.main-logged-out {
  background-color: #fffbeb;
  border: 1px solid #fbbf24;
}

复杂条件下可借助classnames库简化写法（可选）：

import classNames from 'classnames';

const mainClass = classNames('main-container', {
  'main-logged-in': isLoggedIn,
  'main-logged-out': !isLoggedIn
});

2. 内联样式条件判断 #

适合简单样式差异场景，直接在style属性中嵌入逻辑：

function Main({ isLoggedIn }) {
  const mainStyle = {
    padding: '20px',
    backgroundColor: isLoggedIn ? '#f0f9ff' : '#fffbeb',
    border: isLoggedIn ? '1px solid #7dd3fc' : '1px solid #fbbf24'
  };
  
  return <div style={mainStyle}>这是Main组件内容</div>;
}

3. CSS Modules（样式隔离场景） #

用CSS Modules避免全局样式污染，写法类似条件类名：

import styles from './Main.module.css';

function Main({ isLoggedIn }) {
  const mainClass = `${styles.mainContainer} ${isLoggedIn ? styles.mainLoggedIn : styles.mainLoggedOut}`;
  
  return <div className={mainClass}>这是Main组件内容</div>;
}

4. Styled Components（CSS-in-JS方案） #

使用styled-components时，可直接在组件定义中加入条件逻辑：

import styled from 'styled-components';

const StyledMain = styled.div`
  padding: 20px;
  background-color: ${props => props.isLoggedIn ? '#f0f9ff' : '#fffbeb'};
  border: ${props => props.isLoggedIn ? '1px solid #7dd3fc' : '1px solid #fbbf24'};
`;

function Main({ isLoggedIn }) {
  return <StyledMain isLoggedIn={isLoggedIn}>这是Main组件内容</StyledMain>;
}

注意事项 #

• 确保isLoggedIn状态能正确传递到Main组件（可从Context、Redux或父组件props获取）
• 若为类组件，将函数中的props.isLoggedIn替换为this.props.isLoggedIn即可

内容的提问来源于stack exchange，提问作者Erik Oberta