react.js - react挂外部样式表,显示样式未定义的问题

问题描述

问 题

import './stylesheets/main.css';

      <div style={topright}>    
        <ul>
          <li><span><img src="images/help.png" title="帮助" /></span><a href="#">帮助</a></li>
          <li><a href="#">关于</a></li>
          <li><a href="login.html" target="_parent">退出</a></li>
        </ul>
       </div>

css文件如下(我是把原来的html-css直接拷贝过来的)不知道是不是要用专用的react样式格式？

.topright ul{padding-top:15px; float:right; padding-right:12px;}
.topright ul li{float:left; padding-left:9px; padding-right:9px;       background:url(../images/line.gif) no-repeat right;}
.topright ul li:last-child{background:none;}
.topright ul li a{font-size:13px; color:#e9f2f7;}
.topright ul li a:hover{color:#fff;}
.topright ul li span{margin-top:2px;float:left;padding-right:3px;}

react运行结果console界面提示Uncaught ReferenceError: topright is not defined，但是把style放在jsx内部就没有问题.

解决方案

<div style={topright}> 改成 <div className='topright'>

这篇关于react.js - react挂外部样式表,显示样式未定义的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！