Question

我目前在我的React应用中使用Draft.js。它通过node_modules加载，然后在Component中使用，例如：

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'
    }
}

如React文档中所述，我可以使用内联样式设置自己的Component（和div等），例如 h1 或editorWrapper div 。

现在尝试以相同的方式设置编辑器（node_modules Component）的样式不会做任何事情。我知道使用我自己的组件我可以将样式作为道具传递，然后在子Component中使用它，但我真的不想浏览所有Draft.js代码并更改它们的组件。

是否有一个干净的解决方案来设计第三方组件？或者我必须使用好的旧CSS。如果是这样，在外部CSS中的组件和其他样式中有一些样式是不是很糟糕？

Answer 1

draft-js有一些hooks可以用来设置Editor组件的部分样式，但通常没有一种方法来设置第三方组件的样式。许多第三方组件将接受传入的道具来覆盖样式，material-ui做得非常好。如果第三方组件未提供传递自定义样式的选项，则可以将组件包装在className中并编写css以覆盖默认样式。如果第三方组件使用内联样式，这可能不起作用，在这种情况下，您必须在整个css上使用!important或完全分叉组件。希望有所帮助！

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

1 个答案: