styledcomponents和meotion的用法

原创已于 2023-07-03 19:47:46 修改 · 439 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

于 2022-01-04 16:56:19 首次发布

react 专栏收录该内容

42 篇文章

订阅专栏

这篇博客介绍了如何在React应用中使用styled-components库来创建自定义组件，并展示了如何通过结合classnames库来管理类名。内容包括设置组件背景色、响应式布局以及动画效果的实现。此外，还演示了如何利用第三方组件如Arco Design，并通过styled-components进行样式定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

包裹在元素上的语法

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%;
  }
`;