angular - prebuilt - npm install material design



Material Angular Não foi possível encontrar o tema central do Material Angular (8)

Adicionar:

@import "[email protected]/material/prebuilt-themes/indigo-pink.css"

para o seu style.css

https://src-bin.com

No meu projeto Angular2 eu instalei o último plugin de material em https://material.angular.io/guide/getting-started . Em seguida, adiciono @import '[email protected]/material/prebuilt-themes/deeppurple-amber.css'; para o meu arquivo css para o meu componente. Mas no meu console Angular mostra esse erro:

material.es5.js: 148 Não foi possível encontrar o tema central do Material Angular. A maioria dos componentes de material pode não funcionar como esperado. Para mais informações, consulte o guia do tema: https://material.angular.io/guide/theming `

Os componentes do material não estão funcionando. O que há de errado?


Answer #1

Adicione @import "[email protected]/material/prebuilt-themes/indigo-pink.css" ; para style.css do seu projeto angular.

Caso você queira qualquer outro tema apenas siga os passos: Módulos de Nó -> @lagart -> material -> temas pré-construídos ->

i) deeppurple-amber : @import "[email protected]/material/prebuilt-themes/deeppurple-amber.css

ii) rosa-índigo : @import "[email protected]/material/prebuilt-themes/indigo-pink.css

iii) pink-bluegrey : @import "[email protected]/material/prebuilt-themes/pink-bluegrey.css

iv) roxo-verde : @import "[email protected]/material/prebuilt-themes/purple-green.css

E se você quiser ler, pode visitar : https://material.angular.io/guide/theming


Answer #2

Além das instruções @import mencionadas acima. Por favor, certifique-se de adicionar encapsulamento: ViewEncapsulation.None inside @Component decorator.

@Component({
selector: 'app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.None})

Se você está procurando a configuração de material angular para o modelo de estúdio visual Angular SPA .net 1.1 ou 2.0 Angular SPA. Por favor, encontre os detalhes das instruções de configuração bem documentadas here .


Answer #3

Eu trabalhei com os seguintes passos:

1) Importe este (ou outro) tema material para o seu arquivo css principal:

@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";

2) Certifique-se também de registrar este arquivo css principal com o arquivo app.component

@Component({
  selector: 'app',
  styleUrls: [
    './app.component.css'
  ]
})

3) Verifique se os componentes necessários são importados de @ angular / material no arquivo app.module

import { MdCardModule, MdInputModule } from '@angular/material';

Answer #4

Se isso acontecer durante o teste com Karma, adicione o seguinte pattern à lista de files em seu arquivo karma.config.js .

module.exports = function (config) {
   config.set({
    basePath: '',
    ...,
    files: [
        {pattern: './node_modules/@angular/material/prebuilt-themes/indigo-pink.css', included: true, watched: true}
    ],
    ...
}

Para mais detalhes, consulte aqui: https://www.bountysource.com/issues/44073085-a-testing-with-material-components-guide-to-demonstrate-including-core-theme-in-test-suite


Answer #5

Se você estiver usando o Angular-CLI, precisará fazer uma referência ao arquivo de temas, por exemplo, "candy.scss" no arquivo .angular-cli.json. Olhe bem de perto, você tem um * .scss? É um arquivo Sass. Procure aqui informações: https://material.angular.io/guide/theming . Então, no arquivo .angular-cli.json, sob a propriedade styles, adicione "themes / candy.scss", ao lado de "themes / styles.css". Eu tenho uma pasta em meus projetos chamada "temas". Coloquei o styles.css e o candy.scss na pasta de temas. Agora, o Angular-CLI pode encontrar o seu tema.


Answer #6

Verifique qualquer outra @import no seu arquivo css ou scss. Eu experimentei esse problema e não consegui resolvê-lo até que outras importações tivessem sido removidas.


Answer #7

colocar esse código em seu arquivo angular-cli.json

"styles": [
    "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
  ],

funciona bem para mim





themes