CODEWITHSUNDEEP
reactjsstyled-componentsreact-slick
Nika Roffy
Nika Roffy

Reputation: 941

React-slick custom arrow with styled-components

I'm trying to create custom arrow with styled-components for react slick but the dafult content of the arrow would not go away.

Any suggestions?

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

Upvotes: 0

Views: 969

Answers (1)

Vinod Sai
Vinod Sai

Reputation: 2122

styled components will automatically generate class names and add to the component specified. So we should not give class names inside the styles

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

Working example https://codesandbox.io/s/styled-components-forked-roequ?file=/index.js

Upvotes: 1

Related Questions