react样式问题

内联样式

在 JSX 中直接通过 style属性传递 JavaScript 对象

• 动态性强​​：根据状态或 props 实时更新样式。
• 命名规则​​：CSS 属性需转为驼峰式（如 fontSize代替 font-size）

function DynamicButton({ isActive }) {const style = {backgroundColor: isActive ? "green" : "red",padding: "10px"};return <button style={style}>Submit</button>;
}let c1 = {color: 'red',width: '100%',height: '300px',border: 'solid 1px red'
}
class Component1 extends React.Component{render(){console.log(c1)return (<div style={c1}></div>)        }
}

通过class类名控制

class Component1 extends React.Component{render(){return (<div className="c1"></div>)        }
}ReactDOM.render(<Component1 />,document.getElementById('app')
)

CSS-in-JS​

核心库​​：styled-components、emotion

• ​组件化样式​​：将 CSS 嵌入 JavaScript，生成带样式的组件。
• 动态样式​​：通过 props 动态调整样式（如主题切换）。

// 1.安装
npm install styled-components
// 2.使用
import styled from 'styled-components';const StyledButton = styled.button`background: ${props => props.primary ? "blue" : "gray"};padding: 10px;&:hover { opacity: 0.8; }
`;function App() {return <StyledButton primary>Submit</StyledButton>;
}

链接: styled-components