web-dev-qa-db-ja.com

Semantic-UI React：create-react-appプロジェクトでより少ない変数を使用してテーマを設定する方法

Create-react-appプロジェクトでSemantic-UIを使用しています。カスタムテーマを使用して、ThemeProviderを使用して個々のコンポーネントを変更しています。これはうまく機能しています。しかし、私はより少ない変数を変更する方法を理解しようとしています semantic-uiドキュメントで説明されています

reactsemantic-ui ドキュメントはこれについて多くを提供していません。何かアドバイスはありますか？

私のIndex.jsはおおよそ次のようになります。

import 'semantic-ui-css/semantic.min.css'
import { ThemeProvider } from 'styled-components'
import mainTheme from './themes/mainTheme'


ReactDOM.render(
  <ThemeProvider theme={mainTheme}>
    <App />
  </ThemeProvider>
  document.getElementById('root')
)

編集：私が達成しようとしていることを具体的にするために、使用するメインフォントを変更したいと思います。

reactjscreate-react-appsemantic-ui-react
9
Zumo

私は sematnic UIとCRAを使用してカスタムテーマを使用するこのチュートリアル に出くわしました。これはこのプロセスの概要を完全に示しています。静かで長いプロセスなので、リンクだけにしておきます。

チュートリアルのGithubリポジトリへのリンクは次のとおりです。

1
Zumo

編集：これにはsemantic-uiパッケージを使用できます。 https://react.semantic-ui.com/usage#semantic-ui-package

完全なSemanticUIパッケージをインストールします。セマンティックUIにはGulpビルドツールが含まれているため、プロジェクトは独自のテーマの変更を保持できるため、スタイル変数をカスタマイズできます。

セマンティックUIのテーマに関する詳細なドキュメントは、ここにあります。

$ npm install semantic-ui --save-dev

Gulpを使用してプロジェクトをビルドした後、縮小したCSSファイルをindex.jsファイルに含める必要があります。

import '../semantic/dist/semantic.min.css';

その他のアプローチ：1つの方法は、プロジェクトの一部としてテーマ構成を持ち、おそらくフォークされたgitリポジトリにsemantic-uiを持ち、この構成を使用して https：// semantic-ui）のようなカスタムビルドコマンドを実行することです。 com/Introduction/build-tools.html 。

ワークフローはこんな感じ。 gulp build-new（フォークされたsemantic-uiリポジトリ内）を実行します。これは、theme.configパス（reactプロジェクトのテーマパスを指す）の引数を取り、フォークされたリポジトリに配置してから、gulp buildを実行してテーマ付きcssを生成します。コンパイルされたcssをreactプロジェクトに置き換えるタスクを実行することもできます。

1
Sudheer

簡単な答え...私はあなたができるとは思わない。

ここで.cssファイルを直接インポートしているので、コンパイルされたスタイルシートを使用しているので、変数が少ないと役に立ちません。この問題を解決する2つの方法のうちの1つがわかります。

1）独自のlessスタイルシートを作成して、このライブラリのlessファイルをインポートします。まだ使用量が少ないため、このオプションはお勧めしません。

2）独自のスタイルシートで自分でフォントを上書きします。スタイル付きコンポーネントを使用しているため、 injectGlobal オプションを使用してこれを実現できます。

1
jerelmiller

docs を見ると、基本的にglobalsフォルダーにthemeフォルダーがあり、このフォルダーにはsite.variablesとsite.overridesの2つのオプションファイルが含まれています。上記の@fontのsite.overrides変数をオーバーライドできると思います。

site.variablesここ の例を見ることができます。

1
Daniel Andrei

公式の定型文 を確認してください。これには、Webpack3を使用して事前構成された環境と、それに続くテーマの例が含まれています テーマガイド 。

0
Oleksandr Fediashov