Пользовательская стрелка React-slick со стилизованными компонентами

Я пытаюсь создать пользовательскую стрелку со стилизованными компонентами для реакции, но содержимое стрелки не исчезнет.

Какие-либо предложения?

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

reactjs styled-components react-slick
person Nika Roffy    schedule 25.09.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

стилизованные компоненты будут автоматически генерировать имена классов и добавлять их к указанному компоненту. Поэтому мы не должны указывать имена классов внутри стилей.

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

person Vinod Sai    schedule 25.09.2020
comment
Nvm, я исправил это, но он все еще отображает кнопку по умолчанию - person Nika Roffy; 25.09.2020
comment
Вы можете проверить ссылку csb, которую я добавил сейчас? - person Vinod Sai; 25.09.2020
comment
Это сработало, спасибо, я смогу принять ваш ответ через несколько минут. - person Nika Roffy; 25.09.2020