webentwicklung-frage-antwort-db.com.de

Semantic-UI React: Wie man mit weniger Variablen ein Design-React-App-Projekt erstellt

Ich verwende Semantic-UI in meinem Create-React-App-Projekt. Ich verwende ein benutzerdefiniertes Design, um einzelne Komponenten mit ThemeProvider zu ändern, was gut funktioniert. Allerdings versuche ich herauszufinden, wie die weniger Variablen geändert werden können als beschrieben in der Semantic-Ui-Dokumentation

Die reag semantic-ui -Dokumentation bietet dazu nicht viel. Irgendwelche Ratschläge?

Mein Index.js sieht ungefähr so ​​aus:

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

Bearbeiten: Um genau zu sein, was ich erreichen möchte, möchte ich die verwendete Hauptschriftart ändern.

reactjscreate-react-appsemantic-ui-react
8
Zumo

Ich stieß auf dieses Tutorial, um ein benutzerdefiniertes Design mit sematnicer Benutzeroberfläche und CRA zu verwenden , das diesen Prozess perfekt umreißt. Es ist ein ziemlich langer Prozess, also lasse ich ihn nur mit dem Link.

Hier ist der Link zum Github Repo des Tutorials.

1
Zumo

BEARBEITEN: Sie können dafür das semantic-ui-Paket verwenden. https://react.semantic-ui.com/usage#semantic-ui-package

Installieren Sie das vollständige Semantic UI-Paket. Die semantische Benutzeroberfläche enthält Gulp-Build-Tools, mit denen Ihr Projekt seine eigenen Designänderungen beibehalten und die Stilvariablen anpassen kann.

Eine ausführliche Dokumentation zum Thema Semantic UI finden Sie hier.

$ npm install semantic-ui --save-dev

Nachdem Sie das Projekt mit Gulp erstellt haben, müssen Sie die minimierte CSS-Datei in Ihre index.js-Datei aufnehmen:

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

Andere Ansätze: Eine Möglichkeit besteht darin, eine Theme-Konfiguration als Teil Ihres Projekts zu haben und semantic-ui wahrscheinlich in forked git repo zu haben. Verwenden Sie diese Konfiguration, um einen benutzerdefinierten Build-Befehl auszuführen, der https: // semantic-ui ähnlich ist. de/einführung/build-tools.html .

Workflow wäre so. Führen Sie gulp build-new (In Forked Semantic-UI Repo) aus, das ein Argument für den Pfad theme.config Annimmt (das auf den Pfad Ihres Reactive Projects-Themas verweist), und platzieren Sie es in Forked Repo, und führen Sie dann die Generierung von gulp build Aus Themen-CSS. Sie können die Aufgabe haben, sogar konformes CSS in Ihr Reaktionsprojekt zu ersetzen.

1
Sudheer

Die kurze Antwort ... Ich glaube nicht, dass du das kannst.

Da Sie die .css-Datei hier direkt importieren, verwenden Sie das kompilierte Stylesheet, so dass weniger Variablen Ihnen nichts nützen. Ich sehe zwei Möglichkeiten, um dieses Problem zu lösen. 

1) Erstellen Sie ein eigenes Stylesheet, das weniger Dateien dieser Bibliotheken importiert. Ich empfehle diese Option nicht, da Sie weniger bereits verwenden.

2) Überschreiben Sie die Schriftart selbst in Ihrem eigenen Stylesheet. Da Sie Stilkomponenten verwenden, können Sie die Option injectGlobal verwenden, um dies zu erreichen.

1
jerelmiller

Wenn Sie über den Ordner docs schauen, können Sie im Grunde einen globals-Ordner in Ihrem theme-Ordner haben, der zwei optionale Dateien enthält: site.variables und site.overrides. Ich gehe davon aus, dass Sie die @font-Variable in besagtem site.overrides überschreiben könnten. 

Sie können ein Beispiel für site.variableshier sehen.

1
Daniel Andrei

Check out die offizielle Version , enthält die vorkonfigurierte Umgebung mit Webpack3 und Beispiele für folgende Themen/ Leitfaden .

0
Alexander Fedyashov