React.js內聯樣式 - 如何樣式從node_modules組件

我目前在我的React應用程序中使用Draft.js。使用React.js內聯樣式 - 如何樣式從node_modules組件

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

正如陣營文檔描述，我可以樣式我自己的組件（和申報單等）：它是通過node_modules加載，然後在一個組件使用，例如內聯樣式，如h1或編輯器包裝div。

現在試圖以相同的方式設置樣式編輯器（node_modules組件）不做任何事情。我知道用我自己的組件，我可以將這個樣式作爲道具傳遞，然後在子組件中使用它，但我真的不想通過所有Draft.js代碼並更改它們的組件。

是否有一個乾淨的解決方案風格的第三方組件？或者我必須使用良好的舊CSS。如果是這樣，在外部CSS的組件和其他樣式中使用一些樣式不是不好的方法嗎？

來源

2016-09-19 gisderdube

看這裏https://facebook.github.io/draft-js/docs/advanced-topics-inline-styles.html –

@FazalRasel據我所知，這種風格編輯器內的文本，而不是編輯器本身。 – gisderdube

draft-js有一些hooks可以用來設置編輯器組件的某些部分，但通常沒有一種方法可以設置第三方組件的樣式。很多第三方組件都會接受通過的道具來覆蓋樣式，material-ui做得很好。如果第三方組件沒有提供傳遞自定義樣式的選項，則可以將該組件包裝在className中，並編寫css以覆蓋默認樣式。如果第三方組件使用內聯樣式，這可能不起作用，在這種情況下，您必須在您的css中使用!important或完全分解組件。希望有所幫助！

來源

2016-09-19 17:02:38

感謝您的信息！ – gisderdube

React.js內聯樣式 - 如何樣式從node_modules組件

回答

相關問題