web-dev-qa-db-ja.com

スタイル付きコンポーネントと反応ブートストラップ？

styled-components を react-bootstrap と一緒に使用する方法はありますか？ react-bootstrapは、コンポーネントのbsClassの代わりにclassNamepropertiesを公開します。これは、スタイル付きコンポーネントと互換性がないようです。

何か経験はありますか？

reactjsreact-bootstrapstyled-components
25
jpfollenius

コンポーネントの元のスタイルをブートストラップから維持しながら、スタイルを拡張できます。 react bootstrap with styled-components here 。

const StyledButton = styled(Button)`
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

参照用のサンドボックスは次のとおりです。 https://codesandbox.io/s/2vpm40qk9

35
Boy With Silver Wings

より良い代替手段を提供したいと思います。

私は以前にreact-bootstrapを使用していましたが、現在の実装はbootstrap=をreactに完全に移植しておらず、スタイル設定されていないCSS/Fontsなどの外部ファイルに依存する必要がありました-コンポーネントの哲学とベストプラクティス。

スタイル付きコンポーネントがcssインターフェイスを提供することを考慮して、bootstrap= 4を bootstrap-styled というプロジェクトでES6のベストプラクティスとともに移植しました。

このTwitter Bootstrap v4 bootstrapの実装は、CSSまたは余分なファイルを一度も使わずにスタイル付きコンポーネントに完全に実装されています。

これにより、完全なjs API、テーマ、モジュール性、再利用性から始まるいくつかの利点が得られます。

スタイルをオーバーライドするには、ThemeProviderを使用するか、props.theme on 任意のコンポーネント 。

デモはこちら を見ることができます

貢献者のおかげでタイプスクリプトもサポートしています。

7
Dimitri Kopriwa