react第二天学习笔记

痞子三分冷 提交于 2020-02-12 12:18:36

1.react中css样式的使用方式

  1)jsx内嵌样式(这第一个大括号表示要在jsx中写js,第二个表示js对象)

    <li style = {{color : '#FF0'}}>jsx内嵌样式</li>
  2)使用className在通过css文件控制样式
    <li className = 'Red'>使用className在通过css控制样式</li>
  3)当有多个className时,也就是有多重特征时,可以从npm中下载classnames,因为classNames为方法   
    <li className = {classNames("a",{b:true,c:false})}></li>
  4)使用styled-components在原有元素的样式上包装成新的样式(扩展元素名都需要大写,且第一种表示为模板字符串``,不是引号)
    const Title = styled.h1`
      color : #F00;
    `
    const Button = styled.button({
      color: 'grey',
    });
    <Title />
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!