Πώς να αλλάξετε το προεπιλεγμένο χρώμα στο υλικό UI ;!

Την πρώτη φορά που χρησιμοποιούσα το υλικό UI, ο συνεργάτης του έργου μου και εγώ δεν είχαμε χρόνο να σκάψουμε στην προσαρμογή του θέματος. Τη δεύτερη φορά που χρησιμοποίησα το υλικό UI, έχω σκαλίσει χρόνο για να προσαρμόσετε το θέμα.

Ως ένα γρήγορο υπόβαθρο, το υλικό UI είναι ένα πλαίσιο React UI. Έχω απολαύσει πραγματικά τη χρήση του στα τελευταία μου δύο έργα, επειδή βοηθά να στροβιλίζω την αίσθηση του UI σας να είναι πολύ πιο σύγχρονο.

Αν ξεκινάτε, αυτή η σελίδα που περιέχει πρότυπα υλικών UI σίγουρα δεν είναι το χειρότερο μέρος για να αρχίσετε να υπολογίζετε πώς να προχωρήσετε με αυτό το πλαίσιο.

Εντάξει, πίσω στα πράγματα διασκέδασης. Το υλικό UI έχει μπλε και σκούρο ροζ ενσωματωμένο ως πρωτεύοντα και δευτερεύοντα χρώματα για το θέμα. Ας υποθέσουμε ότι θέλετε να προσαρμόσετε μόνο το χρώμα για τώρα. Ας υποθέσουμε ότι έχετε ξεκινήσει το σχέδιό σας με

δημιουργία-αντιδρά-app

Πρώτα: Εισαγάγετε το createMuiTheme και το Theme provider από υλικό-ui / core στο αρχείο index.js

εισαγωγή {createMuiTheme, ThemeProvider} από το "@ material-ui / core".

ΕΠΟΜΕΝΟ: Αντικαταστήστε την προσαρμοσμένη παλέτα στο index.js

const θέμα = createMuiTheme ({
   παλέτα: {
      πρωταρχικός: {
         main: "# ff8f00" // Πρόκειται για ένα πορτοκαλί χρώμα
                },
      δευτεροβάθμια: {
         main: "# ffcc80" // Ένα άλλο χρώμα πορτοκαλί
                 }}
            },
fontFamily: γραμματοσειρά // ως άκρη, συνιστούμε να εισαγάγετε γραμματοσειρά roboto για έργα υλικού UI! Φαίνεται πολύ ωραίο
});

Από πού παίρνετε τους δεκαεξαδικούς κωδικούς, ρωτάτε; Ανατρέξτε εδώ στην τεκμηρίωση του υλικού UI στα χρώματα. Μπορείτε επίσης να κάνετε περισσότερα με τα χρώματα από ό, τι έκανα, αλλά τώρα αυτή η λεπτή εφαρμογή είναι διαθέσιμη και για σας.

Τελικά: Τυλίξτε την εφαρμογή σας με το ThemeProvider στο αρχείο index.js. Σημείωση Χρήση . Μη χρησιμοποιεις . Μάθετε από τα λάθη μου, παρακαλώ, επιμένω. Η χρήση του MuiThemeProvider δεν θα αλλάξει το χρώμα της εφαρμογής, αλλά ο ThemeProvider θα το κάνει.

ReactDOM.render ( , document.getElementById ("root")).

Αυτό είναι το μόνο που υπάρχει σε αυτό! Εδώ είναι το τελικό βλέμμα!

Χρησιμοποίησα αυτήν την εφαρμογή για το CoinTiger, το οποίο είναι διαθέσιμο για να δείτε εδώ.