How to use it in NextJs (Override css)

[zhex900]

Hi,

I am trying to use this component in nextjs. This is my wrapper component. But the clap count is in the wrong place.

I need to adjust the css

How do I override the css?

import { useEffect } from 'react'
import 'applause-button/dist/applause-button.css'

export default function ApplauseButton() {
  useEffect(() => import('applause-button'), [])

  const size = 25

  return (
    <div>
      <applause-button style={{ width: size, height: size }} multiclap={true} />
    </div>
  )
}

[zhex900]

I solved it myself.

import { useEffect } from 'react'
import 'applause-button/dist/applause-button.css'
import './ApplauseButton.module.css'
export default function ApplauseButton() {
  useEffect(() => {
    import('applause-button')
  }, [])

  const size = 25

  return (
    <div>
      <applause-button
        id="applause-button"
        color="#2dd4bf"
        style={{ width: size, height: size }}
        multiclap={true}
      />
    </div>
  )
}

I have add this css

#applause-button .count-container { top: -90%; } to the main style .