Mixing
mat-card, how to change default padding
I want to change the global, default padding on a Angular Material, mat-card.
In the angular.json I have this specification:
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles/app.theme.scss",
"src/styles/styles.scss"
],
i make the adjustment inside of styles.scss
.mat-card {
margin: 5px;
padding: 5px;}
Result is that margin works, while padding does not. this is the result in the devtools. I see there is a .mat-card in <style> that takes precedence.
How do I set the padding on a global basis on a mat-card?
angular angular-material edited Jan 1 at 15:02
Rajendra arora
1,50211018
asked Jan 1 at 14:59
jeffjeff
1,87812033
add a comment |
I want to change the global, default padding on a Angular Material, mat-card.
In the angular.json I have this specification:
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles/app.theme.scss",
"src/styles/styles.scss"
],
i make the adjustment inside of styles.scss
.mat-card {
margin: 5px;
padding: 5px;}
Result is that margin works, while padding does not. this is the result in the devtools. I see there is a .mat-card in <style> that takes precedence.
How do I set the padding on a global basis on a mat-card?
angular angular-material edited Jan 1 at 15:02
Rajendra arora
1,50211018
asked Jan 1 at 14:59
jeffjeff
1,87812033
add a comment |
I want to change the global, default padding on a Angular Material, mat-card.
In the angular.json I have this specification:
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles/app.theme.scss",
"src/styles/styles.scss"
],
i make the adjustment inside of styles.scss
.mat-card {
margin: 5px;
padding: 5px;}
Result is that margin works, while padding does not. this is the result in the devtools. I see there is a .mat-card in <style> that takes precedence.
How do I set the padding on a global basis on a mat-card?
angular angular-material edited Jan 1 at 15:02
Rajendra arora
1,50211018
asked Jan 1 at 14:59
jeffjeff
1,87812033
I want to change the global, default padding on a Angular Material, mat-card.
In the angular.json I have this specification:
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles/app.theme.scss",
"src/styles/styles.scss"
],
i make the adjustment inside of styles.scss
.mat-card {
margin: 5px;
padding: 5px;}
Result is that margin works, while padding does not. this is the result in the devtools. I see there is a .mat-card in <style> that takes precedence.
How do I set the padding on a global basis on a mat-card?
angular angular-material angular angular-material edited Jan 1 at 15:02
Rajendra arora
1,50211018
asked Jan 1 at 14:59
jeffjeff
1,87812033
edited Jan 1 at 15:02
Rajendra arora
1,50211018
asked Jan 1 at 14:59
jeffjeff
1,87812033
edited Jan 1 at 15:02
Rajendra arora
1,50211018
edited Jan 1 at 15:02
Rajendra arora
1,50211018
edited Jan 1 at 15:02
Rajendra arora
1,50211018
1,50211018
asked Jan 1 at 14:59
jeffjeff
1,87812033
asked Jan 1 at 14:59
jeffjeff
1,87812033
asked Jan 1 at 14:59
jeffjeff
1,87812033
1,87812033
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
You must scope them. Angular will take css of its own component first. So if you want to change globally scope them with any class name such as 'custom'.
<mat-card class="custom"></mat-card>
In stylesheet
.custom.mat-card{
//your styles
}
To know more refer angular material customozing
answered Jan 1 at 19:24
Akhi AklAkhi Akl
65728
While this is a good approach, and one I advocate - you can actually globally override the material classes in the global scope (styles.scssor other configured style files inangular.json). You just have to be careful with how specific your selectors are. This is the same for any component withencapsulationset toViewEncapsulation.None.
– hevans900
Jan 2 at 17:01
Yes. Need to be careful while setting ViewEncapsulation.None
– Akhi Akl
Jan 2 at 20:08
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53996472%2fmat-card-how-to-change-default-padding%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You must scope them. Angular will take css of its own component first. So if you want to change globally scope them with any class name such as 'custom'.
<mat-card class="custom"></mat-card>
In stylesheet
.custom.mat-card{
//your styles
}
To know more refer angular material customozing
answered Jan 1 at 19:24
Akhi AklAkhi Akl
65728
While this is a good approach, and one I advocate - you can actually globally override the material classes in the global scope (styles.scssor other configured style files inangular.json). You just have to be careful with how specific your selectors are. This is the same for any component withencapsulationset toViewEncapsulation.None.
– hevans900
Jan 2 at 17:01
Yes. Need to be careful while setting ViewEncapsulation.None
– Akhi Akl
Jan 2 at 20:08
add a comment |
You must scope them. Angular will take css of its own component first. So if you want to change globally scope them with any class name such as 'custom'.
<mat-card class="custom"></mat-card>
In stylesheet
.custom.mat-card{
//your styles
}
To know more refer angular material customozing
answered Jan 1 at 19:24
Akhi AklAkhi Akl
65728
While this is a good approach, and one I advocate - you can actually globally override the material classes in the global scope (styles.scssor other configured style files inangular.json). You just have to be careful with how specific your selectors are. This is the same for any component withencapsulationset toViewEncapsulation.None.
– hevans900
Jan 2 at 17:01
Yes. Need to be careful while setting ViewEncapsulation.None
– Akhi Akl
Jan 2 at 20:08
add a comment |
You must scope them. Angular will take css of its own component first. So if you want to change globally scope them with any class name such as 'custom'.
<mat-card class="custom"></mat-card>
In stylesheet
.custom.mat-card{
//your styles
}
To know more refer angular material customozing
answered Jan 1 at 19:24
Akhi AklAkhi Akl
65728
You must scope them. Angular will take css of its own component first. So if you want to change globally scope them with any class name such as 'custom'.
<mat-card class="custom"></mat-card>
In stylesheet
.custom.mat-card{
//your styles
}
To know more refer angular material customozing
answered Jan 1 at 19:24
Akhi AklAkhi Akl
65728
answered Jan 1 at 19:24
Akhi AklAkhi Akl
65728
answered Jan 1 at 19:24
Akhi AklAkhi Akl
65728
answered Jan 1 at 19:24
Akhi AklAkhi Akl
65728
65728
While this is a good approach, and one I advocate - you can actually globally override the material classes in the global scope (styles.scssor other configured style files inangular.json). You just have to be careful with how specific your selectors are. This is the same for any component withencapsulationset toViewEncapsulation.None.
– hevans900
Jan 2 at 17:01
Yes. Need to be careful while setting ViewEncapsulation.None
– Akhi Akl
Jan 2 at 20:08
add a comment |
While this is a good approach, and one I advocate - you can actually globally override the material classes in the global scope (styles.scssor other configured style files inangular.json). You just have to be careful with how specific your selectors are. This is the same for any component withencapsulationset toViewEncapsulation.None.
– hevans900
Jan 2 at 17:01
Yes. Need to be careful while setting ViewEncapsulation.None
– Akhi Akl
Jan 2 at 20:08
While this is a good approach, and one I advocate - you can actually globally override the material classes in the global scope (
styles.scss or other configured style files in angular.json). You just have to be careful with how specific your selectors are. This is the same for any component with encapsulation set to ViewEncapsulation.None.– hevans900
Jan 2 at 17:01
While this is a good approach, and one I advocate - you can actually globally override the material classes in the global scope (
styles.scss or other configured style files in angular.json). You just have to be careful with how specific your selectors are. This is the same for any component with encapsulation set to ViewEncapsulation.None.– hevans900
Jan 2 at 17:01
Yes. Need to be careful while setting ViewEncapsulation.None
– Akhi Akl
Jan 2 at 20:08
Yes. Need to be careful while setting ViewEncapsulation.None
– Akhi Akl
Jan 2 at 20:08
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53996472%2fmat-card-how-to-change-default-padding%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
