Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support passing custom className

See original GitHub issue

Add forwarding of className prop to root div on Picker component

Issue Analytics

State:
Created 5 years ago
Comments:5

Top GitHub Comments

5reactions

Boooobercommented, May 6, 2020

Also, styled-wrappers leads to unnecessary DOM nodes. In case when there are too many, for example Emoji components, that could be an issue.

Using them in this style would be quite handy:

import styled from 'styled-components';
import { Emoji as EmojiMart } from 'emoji-mart';

export const Emoji = styled(EmojiMart)`
  vertical-align: middle;
  // any other styles
`;

5reactions

goodmindcommented, Mar 22, 2019

@nolanlawson, no, but passing className is more convenient

const StyledPicker = styled(Picker)`
   background-color: #000;
`

would pass generated className to Picker With selectors you would need to do it like this

const Wrapper = styled.div`
   .emoji-mart { your styles }
`
const MyPicker = (props) => <Wrapper><Picker {...props} /></Wrapper>

Top Results From Across the Web

How to pass custom class name on react and use scss?

I am trying to create a react component that has the class name as props being passed, I have managed sending the props...

Pass class names as props to React components | bobbyhadz

To pass class names as props to a React component, pass a string containing the class names as a prop. Destructure the prop...

Passing className to components in React - Daily Dev Tips

In React, we are familiar with the concepts of a className on components. It's the way React adds the class attribute to an...

Styling and CSS - React

Pass a string as the className prop: render() { return <span className="menu navigation-menu">Menu</span> }. It is common for CSS classes to depend on...

How To Style React Components | DigitalOcean

After creating the custom hook, you passed the custom class names to the className property. Save the file. Notice that you are using...