基本用法

  1. import styled, { css } from 'styled-components'
  3. const { Item: BreadcrumbItem  } = Breadcrumb
  5. // 定义样式
  6. const StyledPointer = css`
  7. cursor: pointer;
  8. `
  10. // 定义组件
  11. const StyledH1 = styled.div`
  12. font-size: 20px;
  13. font-weight: 600;
  14. `
  16. // 修改组件
  17. const StyledBreadcrumbItem = styled(BreadcrumbItem)`
  18. font-size: 18px;    // 会覆盖 BreadcrumbItem font-size属性
  19. `
  21. // 动态样式写法一：根据组件是否存在对应属性
  22. // 如果 StyledBreadcrumbItem 组件存在 pointer 属性，则会添加 StyledPointer 样式
  23. const StyledBreadcrumbItem = styled(BreadcrumbItem)`
  24. font-weight: 400;
  25. ${props => props.pointer && StyledPointer};
  26. ${props => props.primary && css`
  27.   background: white;
  28. `}
  29. `
  30. <StyledBreadcrumbItem pointer>123</StyledBreadcrumbItem>
  32. // 动态样式写法二：对象模式，根据组件对应属性的属性值
  33. // 根据 StyledBreadcrumbItem 组件传递的cursor属性值 动态设置 cursor样式
  34. const StyledBreadcrumbItem = styled(BreadcrumbItem)(props => ({
  35.   fontWeight: 400,
  36.   cursor: props.cursor,
  37. }))
  39. <StyledBreadcrumbItem cursor="pointer">123</StyledBreadcrumbItem>

设置图片

  1. // 静态图片
  2. const StyledArrow = Styled.div`
  3. position: relative;
  4. top: 10px;
  5. width: 27px;
  6. height: 22px;
  7. background-image: url(${IMG_ARROW});
  8. background-size: 100% 100%;
  9. `
  11. // 动态图片
  12. // 写法一
  13. const StyledImageBox = styled.div`
  14. width: 275px;
  15. height: 275px;
  16. border-bottom-left-radius: 4px;
  17. border-bottom-right-radius: 4px;
  18. position: relative;
  19. background-image: url(${props => props.assetsImg})
  20. `
  21. // 写法二
  22. const StyledImageBox = styled.div(props => ({
  23.   width: '275px',
  24.   height: '275px',
  25.   borderBottomLeftRadius: '4px',
  26.   borderBottomRightRadius: '4px',
  27.   position: 'relative',
  28.   backgroundImage: `url(${props.assetsImg})`,
  29. }))
  32. <StyledImageBox assetsImg={detailData.fundImg}></StyledImageBox>