添加内联样式 - 图1

    import Radium from ‘radium’ /** * 一、内联样式 1 设置样式的时候应该将键值对放置于 {} 2 内联样式默认无法支持伪类及媒体查询样式设置 * 3 通过radium解决 安装npm i radium —save 如果遇到引入错误，可手动在package.json添加依赖，执行npm i —legacy-peer-deps 导入 Radium 函数将当前需要支持伪类操作的组件包裹之后再导出 */ // const styleObj = { // width: 100, // height: 100, // backgroundColor: ‘green’, // “:hover”: { backgroundColor: ‘skyblue’ }, // “@media (max-width: 1000px)”: { width: 300 } // } const ButtonStyle = { base: { width:150, height:40, fontSize:20, background:‘#ffff’ }, login: { background:‘green’ }, logout: { background:‘orange’ } } const isLogin = false function App() { return ( //
    样式处理
     //可以数组里面设置多个样式，通过判断人为控制 <div> <button style={[ ButtonStyle.base, isLogin ? ButtonStyle.login : ButtonStyle.logout ]}>按钮</button> </div> ) } export default Radium(App)