包裹在元素上的语法
import React from 'react' ;
import classnames from 'classnames/bind' ;
import { IconRight } from '@arco-design/web-react/icon' ;
import styled from 'styled-components' ;
import styles from './index.module.less' ;
const cx = classnames . bind ( styles) ;
export type ArrowProps = {
className? : string;
style? : React. CSSProperties;
onMouseEnter? : React. MouseEventHandler< HTMLDivElement> ;
circleColor? : string;
arrowColor? : string;
size? : string;
smSize? : string;
} ;
const BoxDiv = styled. div< ArrowProps> `
background: ${ props => props. circleColor} ;
width: ${ props => props. size} ;
height: ${ props => props. size} ;
color: ${ props => props. arrowColor} ;
@media screen and (max-width: 1280px) {
width: ${ props => props. smSize} ;
height: ${ props => props. smSize} ;
}
` ;
const CircleMoveArrow : React. FC < ArrowProps> = ( {
circleColor = '#1664FF;' ,
arrowColor = '#FFFFFF' ,
size = '66px' ,
smSize = '40px' ,
className = '' ,
style,
onMouseEnter,
} ) => (
< BoxDiv
circleColor= { circleColor}
size= { size}
smSize= { smSize}
arrowColor= { arrowColor}
className= { cx ( 'arrowBox' , className) }
style= { style}
onMouseEnter= { onMouseEnter} >
< / BoxDiv>
) ;
export default CircleMoveArrow;
const BoxDiv = styled. div<BoxProps>`
background-image: url( ${ props => props. pc_bg} ) ;
@media screen and ( max-width: 767px) {
background-image: url( ${ props => props. m_bg} ) ;
}
`;
import { keyframes } from 'styled-components' ;
const fadeIn = keyframes`
0% {
opacity: 0;
}
100% {
opacity: 1;
}
` ;
const FadeInButton = styled. button`
animation: 1s ${ fadeIn} ease-out;
` ;
对象的形式添加类名JSX
<div className={ styles. navWrap} >
<div className={ [styles.merchandies, !blockType && styles.single] . join( ' ' ) } >
<div className={ [styles.merchandiesHeader, styles.bg] . join( ' ' ) }
函数的形式添加类名JSX
<div
className={ cx( 'search_box' ,
title && 'guodaye' ,
[ 'bar' ] ,
{ guodaye: title === desc} ) }
></ div>
第三方组件使用
import styled from 'styled-components' ;
const StyledModal = styled( Modal) `
@media screen and ( max-width: 600px) {
width: 80%;
}
`;