search

missive / emoji-mart

🏪 One component to pick them all
https://missiveapp.com/open/emoji-mart
MIT License
8.67k stars 835 forks source link

Support passing custom className #210

Closed goodmind closed 5 years ago

goodmind commented 6 years ago

Add forwarding of className prop to root div on Picker component

nolanlawson commented 5 years ago

See discussion in https://github.com/missive/emoji-mart/pull/274#issuecomment-470969125, this feature is not necessary because you can style using selectors based on parent elements.

goodmind commented 5 years ago

@nolanlawson but how about using with styled-components?

nolanlawson commented 5 years ago

I don't know much about styled-components. Is there something about their approach that is incompatible with using CSS selectors?

goodmind commented 5 years ago

@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>
Boooober commented 4 years ago

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
`;