Material-ui: Bagaimana cara mengatur warna teks global

Dibuat pada 10 Apr 2018  ·  6Komentar  ·  Sumber: mui-org/material-ui


Saya memiliki tema gelap yang saat ini menampilkan semua teks di semua komponen sebagai hitam dengan latar belakang hitam. Satu-satunya yang berwarna putih adalah menu yang telah diatur melalui penimpaan

Saya telah mencoba beberapa hal berbeda seperti yang Anda lihat di bawah. Saya tidak yakin tetapi referensi dokumen sebuah palette.text tetapi tampaknya tidak berfungsi.

Bagaimana cara mengatur warna font global

import { createMuiTheme } from "material-ui/styles";

const dark = createMuiTheme({
    shadows: ["none"],
    type: 'dark',
    typography: {
      color: 'white',
    },
    palette: {
        background: {
            paper: '#000',
            default: '#000',
        },
        text: {
          default: '#fff',
        },
        textColor: '#fff',
        primary: {
          main: '#ff0000',
        },
    },

    root: {
      textDecoration: 'none',
    },

    overrides: {
    MuiPaper: {
      root: {
        boxShadow: 'none',
      },
    },
    MuiBackdrop: {
      root: {
        backgroundColor: 'rgba(255, 0, 0, 0.75)',
      },
    },
    MuiAppBar: {
      root: {
        background: 'white',
        boxShadow: 'none',
      },
      colorPrimary: {
        backgroundColor: 'transparent'
      }
    },
    MuiIconButton: {
      root: {
        marginLeft: -12,
        marginRight: 20,
        color: 'white',
      }
    }
  }
});

export default dark;

  • [x] Saya telah mencari masalah dari repositori ini dan yakin bahwa ini bukan duplikat.

Konteks


https://codesandbox.io/s/kk6zp8jw07

Lingkungan Anda

| Teknologi | Versi |
| -------------- | --------- |
| Materi-UI | 1.00beta.40 |
| Bereaksi | 16.3.0 |
| browser | chrome |
| dll | |

question
Sumber
picture afridley
👍2

Komentar yang paling membantu

))) Luangkan beberapa jam untuk mencoba mencari tahu ... SO:


palette:  { 
      text: {
          primary: "#ffffff",
          secondary: "#00000"
    } 
}

color = "textPrimary"
color = "textSecondary"

Terima kasih, Sleazer!

picture 777akot pada 3 Mei 2019
👍45 ❤8 🚀6

Semua 6 komentar

Semuanya didokumentasikan di sini: https://material-ui-next.com/style/color/

lazee picture lazee pada 10 Apr 2018
👎32

Bagaimana cara mengatur warna font global

@afridley Tidak ada warna font global. Sebagian besar warna yang Anda cari berasal dari bagian tipografi. Anda perlu membaca dokumentasi lebih dekat:

const theme = createMuiTheme({
- type: "dark",
  palette: {
+   type: "dark",
  },
});

https://codesandbox.io/s/vvpnpy6jql

oliviertassinari picture oliviertassinari pada 10 Apr 2018

@oliviertassinari Ahh terima kasih atas balasan cepatnya. Saya tidak percaya saya melewatkannya. Saya sedang memikirkan catatan tentang bagaimana

palette: {
+   type: "dark",
  },

mengubah palette.text berarti saya dapat secara manual mengubah warna font default dengan itu jika saya tahu apa yang harus dimasukkan ke dalamnya.

seperti bagaimana palette.background memiliki kertas dan default di dalamnya. Saya pikir mungkin palette.text mungkin memiliki nilai yang serupa. Tetapi saya tidak dapat menemukan dokumentasi tentang dari mana kertas dan default berasal untuk dimasukkan ke dalam palette.background

Jadi saya bertanya-tanya apakah ada dokumentasi tentang nilai-nilai ini karena sepertinya saya hanya dapat menemukannya di tiket terbitan.

palette.text
palette.divider
palette.background
palette.action

ex This works
palette: {
        background: {
            paper: '#000',
            default: '#000',
        },
},

But what values can I change in
palette: {
        text: {
            ?: '#000',
            ?: '#000',
        },
},

Berdasarkan dokumentasi di sini https://material-ui-next.com/customization/themes/#type -light-dark-theme-

afridley picture afridley pada 10 Apr 2018

@afridley Nilai yang dapat Anda ubah adalah primer, sekunder, nonaktif, dan petunjuk. Melihat melalui objek tema default mungkin membantu Anda memahami apa yang bisa diubah dan bagaimana caranya.

Ini tautannya https://material-ui.com/customization/default-theme/

Sleazer picture Sleazer pada 27 Agu 2018
👍4

))) Luangkan beberapa jam untuk mencoba mencari tahu ... SO:


palette:  { 
      text: {
          primary: "#ffffff",
          secondary: "#00000"
    } 
}

color = "textPrimary"
color = "textSecondary"

Terima kasih, Sleazer!

777akot picture 777akot pada 3 Mei 2019
👍45 ❤8 🚀6

Situasi seharusnya membaik di v4. Komponen CssBasline menerapkan theme.palette.text.primary ke elemen body.

oliviertassinari picture oliviertassinari pada 4 Mei 2019
❤5 👍5 👎1
Apakah halaman ini membantu?
0 / 5 - 0 peringkat

Masalah terkait

TimoRuetten picture TimoRuetten  ·  3Komentar
mb-copart picture mb-copart  ·  3Komentar
reflog picture reflog  ·  3Komentar
activatedgeek picture activatedgeek  ·  3Komentar
finaiized picture finaiized  ·  3Komentar