带有样式组件的 React-slick 自定义箭头

Question

我正在尝试使用样式化组件创建自定义箭头以实现流畅的反应，但箭头的错误内容不会消失。

有什么建议吗？

 const RightAr = styled.div`
  .slick-next {
    font-size: 0;
    line-height: 0;
    top: 50%;
    width: 20px;
    height: 20px;
    cursor: pointer;
    color: transparent;
    border: none;
    outline: 0;
    background: 0 0;
  }

  &::before {
    content: > !important;
    font-size: 30px;
    line-height: 1;
    color: black;
    background:none;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    border: solid 1px #d2d2d2;
`

    export const RightArrow = props => {
  const { style, onClick } = props
  return <RightAr className="slick-next" onClick={onClick} />
}

Answer 1

样式组件将自动生成 class 名称并添加到指定的组件。所以我们不应该在样式

中给出class名字

const RightAr = styled.div`
    font-size: 0;
    line-height: 0;
    top: 50%;
    width: 20px;
    height: 20px;
    cursor: pointer;
    color: transparent;
    border: none;
    outline: 0;
    background: 0 0;

  &::before {
    content: ">" !important;
    font-size: 30px;
    line-height: 1;
    color: black;
    background:none;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    border: solid 1px #d2d2d2;
   }
`

export const RightArrow = props => {
  const { style, onClick } = props
  return <RightAr onClick={onClick} />
}

工作示例https://codesandbox.io/s/styled-components-forked-roequ?file=/index.js

带有样式组件的 React-slick 自定义箭头

React-slick custom arrow with styled-components

reactjs

react-slick

styled-components