React中的样式

2022-05-17  本文已影响0人  张_何
内联样式
  constructor(props) {
    super(props);
    this.state = {
      color: "purple"
    }
  }
  render() {
    const pStyle = {
      color: this.state.color,
      textDecoration: "underline"
    }
    return (
      <div>
        <h2 style={{fontSize: "50px", color: "red"}}>我是标题</h2>
        <p style={pStyle}>我是一段文字描述</p>
      </div>
    )
  }
普通的 CSS
.title {
  font-size: 30px;
  color: red;
}

然后在 profile 组件中有个 css 文件,也写了个 title 选择器的样式

.title {
  color: yellow;
}

由于 css 是全局的, 所以这两个 title 选择器就会发生层叠,也就是在使用到 title 选择器的地方要么都显示红色,要么都显示黄色, 不会是我们希望的 home 中显示红色,profile 中显示黄色

css modules
.title {
  font-size: 30px;
  color: red;
}
.banner {
  color: orange;
}

在 index.js 文件中的使用如下:

import React, { PureComponent } from 'react';
import homeStyle from './style.module.css'; // 这里我们按包导入的方式导入,在使用的时候都是用homeStyle.xxx 的方式使用

export default class Home extends PureComponent {
  render() {
    return (
      <div className="home">
        <h2 className={homeStyle.title}>标题</h2>
        <div className={homeStyle.banner}>
          <span>轮播图</span>
        </div>
      </div>
    )
  }
}
CSS in JS
styled-components
import React, { Component } from 'react';
import styled from 'styled-components'
const DivCmp = styled.div`
  color:red;
`
export default class App extends Component {
  render() {
    return (
      <DivCmp>
        <h2>用户昵称</h2>
      </DivCmp>
    )
  }
}

如上图 styled.div`...` 会给我返回一个 div 类型的标签,styeld 后面跟什么就会返回什么类型,如果是 h1, 返回的就是h1,如果是 span,就返回 span, 如果没有这种类型会不显示,

import React, { Component } from 'react';
import styled from 'styled-components'
const DivCmp = styled.div`
  color:red;
  font-size: ${props=>props.fontSize};
  text-decoration: ${props=>props.textDecoration};
`
export default class App extends Component {
  render() {
    return (
      <DivCmp fontSize="55px" textDecoration="underline">
        <span>用户昵称</span>
      </DivCmp>
    )
  }
}

import React, { Component } from 'react';
import styled from 'styled-components'

const HYInput = styled.input.attrs({
  placeholder: "请输入文字", // 这里和HYInput组件中设置placeholder属性是一样的, 
  bColor: "red" // 这里和在HYInput组件中设置一个 bColor 属性是一样的,可以通过 props 来取
})`
  background-color: lightblue;
  border-color: ${props => props.bColor}; // 取出 attrs 中的 bColor
  color: ${props => props.color};// 取出通过属性传过来的 color
`
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      color: "purple"
    }
  }
  render() {
    return (
      <div>
        {/* 从 state 中取出 color 赋值给 color 属性, 这样就能动态改变样式了 */}
        <HYInput type="password" color={this.state.color}/>
      </div>
    )
  }
}

import React, { PureComponent } from 'react';
import styled from 'styled-components';

const HYButton = styled.button`
  padding: 10px 20px;
  border-color: red;
  color: red;
`

const HYPrimaryButton = styled(HYButton)`
  color: #fff;
  background-color: green;
`

export default class App extends PureComponent {
  render() {
    return (
        <HYButton>我是普通的按钮</HYButton>
        <HYPrimaryButton>我是主要的按钮</HYPrimaryButton>
    )
  }
}

import React, { PureComponent } from 'react';
import styled, { ThemeProvider } from 'styled-components';

const TitleWrapper = styled.h2`
  text-decoration: underline;
  color: ${props => props.theme.themeColor};
  font-size: ${props => props.theme.fontSize};
  `

class Home extends PureComponent {
  render() {
    return (
      <TitleWrapper>我是home的标题</TitleWrapper>
    )
  }
}

export default class App extends PureComponent {
  render() {
    return (
      <ThemeProvider theme={{themeColor: "red", fontSize: "25px"}}>
        <Home />
      </ThemeProvider>
    )
  }
}
React 中动态修改class
<div>
  <h2 className={"title " + (isActive ? "active" : "")}> 我是标题</h2>
  <h2 className={["title ", (isActive ? "active" : "")].join(" ")}> 我是标题</h2>
</div>

classNames('foo','bar'); // 'foo bar'
classNames('foo',{bar: true}); // 'foo bar'
classNames({'foo-bar': true}); // 'foo bar'
classNames({'foo-bar': false}); // ''
classNames({foo: true},{bar: true}); // 'foo bar'
classNames({foo: true, bar: true}); // 'foo bar'
classNames('foo', {bar: true, duck: false}, 'baz', {quux: true}); // 'foo bar baz quux'
classNames(null,false,'bar',undefined, 0,1,{baz: null},''); // 'bar 1'
上一篇 下一篇

猜你喜欢

热点阅读