import React, { Component } from 'react'
import PropTypes from 'prop-types'
export default class index extends Component {
    static propTypes = {
     title: PropTypes.string
    }
    render() {
        const h1center',marginBottom:'20px',lineHeight:'35px',
        height:'30px'}
        const {title}=this.props
        return (
         

             
{title}
             

         
        )
    }
}

import React, { Component } from 'react'
import "./index.css"
export default class index extends Component {
    state={
        flag:true
    }
changeColor=()=>{
    this.setState((state,props)=>{
        return{
           flag:!state.flag
        }
    })
}
    render() {
        const {flag}=this.state
        return (
            

                
莫等闲，白了少年头
                点击更改字体颜色
            
        )
    }
}

.blueColor{
    color: blue;
}
.redColor{
    color: red;
}
.btnStyle{
    width: 260px;
    height: 50px;
    background-color: aqua;
    color: #fff;
    border:none;
    font-size: 28px;
    border-radius: 10px;
}

import React,{FC,useState} from "react"
import Cmittem from "@/components1/cmittem"
import cssObj from "./cmtlist.module.scss"
const Cmtlist:FC<{}>=(props)=>{
    return (
        

             
评论列表
       
       
    )
}

export default Cmtlist

import 'antd/dist/antd.less'
import styled from 'styled-components'
function App() {
 const HomeWrapper=styled.div`
 font-size:50px;
 color:red;
 span{
   color:orange;
   &.active{
      color:green;
   }
   &:hover{
     color:blue;
     font-size:40px;
   }
   &::after{
     content:'ssss'
   }
   }
 `
  return (
    

 
我是一个标题
 
 
我是一个副标题
   轮播1
   轮播2
   轮播3
   轮播4
 
    
  );
}

export default App;

import 'antd/dist/antd.less'
import styled from 'styled-components'
function App() {
 const ChangeInput=styled.input.attrs({
   placeholder:'wangsu',
   bgColor:'red'
 })`
 background-color:#7a7ab4;
 color:${props=>props.bgColor}
 `
  return (
    

 
我是一个标题
 
    
  );
}

export default App;

import React, { Component } from 'react'
import styled from 'styled-components'
const HYbutton=styled.button`
   color:red;
   border:1px solid #ccc;
   padding:10px 20px;
`
//这里使用继承
const XLbutton=styled(HYbutton)`
background-color:blue;
`
export default class Button extends Component {

    render() {
        return (
            

                这是一个按钮
                这是一个继承按钮
            
        )
    }
}