React-tooltip: It looks like you've wrapped styled() around your React component (ReactTooltip), but the className prop is not being passed down to a child. No styles will be rendered unless className is composed within your React component.

[ozluy]

It looks like you've wrapped styled() around your React component (ReactTooltip), but the className prop is not being passed down to a child. No styles will be rendered unless className is composed within your React component.

I get this warning when I use it with Styled-Components as Below

import ReactTooltip from 'react-tooltip
import styled from 'styled-components'

export default styled(ReactToolTip)`
// some styles
`

[ozluy]

Quick fix, you can turn off the warning using .attrs({ suppressClassNameWarning: true }) provided by styled-components as below...

import ReactTooltip from 'react-tooltip
import styled from 'styled-components'

export default styled(ReactToolTip).attrs({ suppressClassNameWarning: true })`
// some styles
`

But the issue must be fixed.

[yqbk]

I have the same issue. Any plans to fix it?

[aronhelser]

Sounds like it might be a fairly easy fix - we would welcome a PR :)

On Thu, Oct 10, 2019 at 3:45 AM Jakub Syrek [e-mail]
wrote:

I have the same issue. Any plans to fix it?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/wwayne/react-tooltip/issues/489?email_source=notifications&email_token=AEX6THKH3BL55WIEPFAWEU3QN3MQFA5CNFSM4HINVWXKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEA3HWNQ#issuecomment-540441398,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AEX6THNP7AUI6OWDLLV57M3QN3MQFANCNFSM4HINVWXA
.

[roggervalf]

Hi @yqbk, would you try the new version and let me know if the issue continue.

[yqbk]

@Rogger794, unfortunately, the problem still exists (version 3.11.5).

import React from 'react'
import ReactTooltip from 'react-tooltip'
import styled from 'styled-components'

const StyledTooltip = styled(ReactTooltip)`
  max-width: 20vh;
  white-space: normal;
`
const Tooltip = ({ ...props }) => (
  <StyledTooltip effect="solid" multiline place="top" {...props} />
)

export default Tooltip

Warning:

backend.js:6 It looks like you've wrapped styled() around your React component (ReactTooltip), but the className prop is not being passed down to a child. No styles will be rendered unless className is composed within your React component.

[roggervalf]

I updated the form it pass the styles, could you try the new release 3.11.6 and tell me if it works.

[yqbk]

@Rogger794 It fixes the problem! Thank you! :)