Using supplied CSS

[kevinguard]

Can you please show a working code example on how you use and reference directly the provided CSS from within the node_modules directory? I tried few different ways and so far no luck.

Following is what I have tried:

1. Converting the supplied CSS to JSON styles and passing it as styles to EmojiPicker component (used this tool):

const styles = {
    emoji_dialog: {
        width: "276px",
        height: "220px",
        background: "#fff",
        boxSizing: "border-box",
        borderRadius: "2px",
        overflow: "hidden",
        position: "relative",
        boxShadow: "0 0 0 1px rgba(0,0,0,0.1), 0 2px 15px rgba(0,0,0,0.1)"
    },
    emoji_dialog__emojione: {
        margin: "0"
    },
    emoji_dialog__emoji_dialog_header: {
        padding: "0 10px",
        backgroundColor: "#F5F7F9"
    },
    emoji_dialog__emoji_dialog_header_ul: {
        padding: "0",
        margin: "0",
        listStyle: "none"
    },
    emoji_dialog__emoji_dialog_header_li: {
        display: "inline-block",
        boxSizing: "border-box",
        height: "42px",
        padding: "9px 5px"
    },
    emoji_dialog__emoji_dialog_header_li_img: {
        width: "22px",
        height: "22px",
        WebkitFilter: "grayscale(100%)",
        filter: "grayscale(100%)"
    },
    emoji_dialog__emoji_dialog_header_li_svg: {
        width: "22px",
        height: "22px",
        WebkitFilter: "grayscale(100%)",
        filter: "grayscale(100%)"
    },
    emoji_dialog__emoji_dialog_header_li_active: {
        background: "#fff"
    },
    emoji_dialog__emoji_dialog_header_li_active_img: {
        WebkitFilter: "grayscale(0)",
        filter: "grayscale(0)"
    },
    emoji_dialog__emoji_dialog_header_li_active_svg: {
        WebkitFilter: "grayscale(0)",
        filter: "grayscale(0)"
    },
    emoji_dialog__emoji_row: {
        boxSizing: "border-box",
        overflowY: "hidden",
        paddingLeft: "10px"
    },
    emoji_dialog__emoji_row__emoji: {
        display: "inline-block",
        padding: "5px",
        borderRadius: "4px"
    },
    emoji_dialog__emoji_category_header: {
        display: "table-cell",
        verticalAlign: "middle"
    },
    emoji_dialog__emoji_category_title: {
        fontSize: "18px",
        fontFamily: "sans-serif",
        fontWeight: "normal",
        color: "#444"
    },
    emoji_dialog__emoji_category_heading_decoration: {
        textAlign: "right"
    },
    emoji_dialog__modifiers: {
        listStyle: "none",
        padding: "0",
        margin: "0",
        verticalAlign: "middle",
        whiteSpace: "nowrap"
    },
    emoji_dialog__modifiers_li: {
        display: "inline-block",
        padding: "0 2px"
    },
    emoji_dialog__modifiers_li_last_of_type: {
        paddingRight: "0"
    },
    emoji_dialog__modifiers__modifier: {
        display: "inline-block",
        borderRadius: "10px",
        width: "15px",
        height: "15px",
        position: "relative"
    },
    emoji_dialog__modifiers__modifier_active__after: {
        content: "\"\"",
        display: "block",
        position: "absolute",
        width: "7px",
        height: "7px",
        borderRadius: "10px",
        border: "2px solid #fff",
        top: "2px",
        left: "2px"
    },
    emoji_dialog__modifiers_li_hover: {
        MozTransitionDuration: "200ms",
        WebkitTransitionDuration: "200ms",
        transitionDuration: "200ms",
        WebkitTransform: "scale(1.2)",
        MozTransform: "scale(1.2)",
        transform: "scale(1.2)"
    },
    emoji_dialog__emoji_search_wrapper: {
        padding: "6px 16px"
    },
    emoji_dialog__emoji_search: {
        fontSize: "12px",
        padding: "6px 4px",
        width: "100%",
        border: "1px solid #ddd",
        borderRadius: "4px"
    },
    emoji_dialog__emoji_categories_wrapper: {
        position: "absolute",
        top: "42px",
        bottom: "0",
        left: "0",
        right: "0"
    },
    emoji_dialog__emoji_search_wrapper____emoji_categories_wrapper: {
        top: "83px"
    },
    emoji_dialog__emoji_row__emoji_hover: {
        background: "#F5F7F9"
    },
    emoji_dialog__emoji: {
        width: "22px",
        height: "22px"
    }
};

which apparently doesn't work :-(

2. I also tried binding the CSS to classnames and that also failed:

   import styles from "emoji-picker/css/picker";
   const cx = classNames.bind(styles);

   and

   <EmojiPicker className={cx("emoji_dialog")}
           onChange={function(data) { console.log("Emoji chosen", data); }}
           emojione={{imageType: "png", sprites: true}}
           search={true}/>

Any idea where I am doing wrong?

Thanks you :-)