React.js内联样式-如何从node_modules设置组件样式

Question

I am currently using Draft.js in my React app. It is loaded via node_modules and then used in a Component, eg:

import { Editor } from 'draft-js'

...

class MyComponent extends React.Component {
 render() {
    return(
        <div>
            <h1
                style={ styles.header }
            >Some header</h1>
            <div
                style={ styles.editorWrapper }
            >
                <Editor
                    style={ styles.editor }
                    placeholder="Write something!"
                />
            </div>

        </div>
    )
}
}

const styles = {
    editorWrapper: {
        backgroundColor: '#ececec',
        border: '2px solid #888888',
        padding: '25px'
    },
    editor: {
        backgroundColor: '#000'
    }
}

As described in the React docs, I can style my own Component (and divs etc) using inline styles, like the h1 or the editorWrapper div .

Now trying to style the Editor(node_modules Component) the same way doesn't do anything. I know that with my own Components I could pass the style as props and then use it in the child Component, but I really don't want to go through all the Draft.js code and change their Components.

Is there a clean solution to style 3rd party Components? Or do I have to use good old css. If so, isn't it bad to have some styling in the Components and other styling in external CSS?

Answer 1

draft-js has some hooks you can use to style parts of the Editor component, but generally there is no one way to style 3rd party components. Many third party components will accept props passed in to override styles, material-ui does this quite well. If a third party component doesn't provide an option to pass in custom styles, you can wrap the component in a className and write css to override the default styles. This might not work if the third party component is using inline styles, in which case you either have to use !important all over your css or fork the component entirely. Hope that helps!