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

Posted 2023-02-25

【中文标题】带有样式组件的 React-slick 自定义箭头

【英文标题】：React-slick custom arrow with styled-components

【发布时间】：2020-09-25 10:30:46

【问题描述】：

我正在尝试使用 styled-components 创建自定义箭头以进行反应，但箭头的 dafult 内容不会消失。

有什么建议吗？

 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 />

【参考方案1】：

样式化的组件会自动生成类名并添加到指定的组件中。所以我们不应该在样式中给出类名

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

【讨论】：

Nvm 我修复了它，但它仍然显示默认按钮

你能检查一下我现在添加的csb链接吗？

成功了，谢谢，我会在几分钟内接受你的回答