I am not able to change any font/text colors in my div (using the standard methods), and I think the import of "...theme.scss" is blocking these changes (?), I have never used SCSS. Specifically I want to change just the phone numbers (all) text to red. I can make other changes, so I know the .scss is hooked up. I would like to add the red text to an existing style if possible.
html...
<div class="contact">
<h1>Contact Us</h1>
<div class="contact-footer">
<p><strong>For any other questions, please contact...</strong></p>
<div class="contact-footer-container">
<div class="contact-subcontainer">
<div class="contact-card"><p>Publications<br>Phone: <a href="tel:1-800-123-4567">1-800-123-4567</a><br> <a href="[email protected]">[email protected]</a></p></div>
<div class="contact-card"><p>Product Support<br>Toll-Free: <a href="tel:1-800-123-4567">1-800-123-4567</a><br>
Direct: <a href="tel:1-000-123-4567"> 1-000-123-4567</a><br> Fax: 1-000-123-4567
</div>
</div>
</div>
</div>
component.scss...
@import '~@angular/material/theming';
@import '../../some-material-theme.scss';
p {
font-family: $font-family;
font-size: $text-medium;
}
.contact-footer {
background-color: lightgray;
padding: 8px;
margin: 15px;
}
.contact-footer-container {
display: flex;
flex-flow: row;
}
.contact-subcontainer {
display: flex;
flex-flow: row;
flex-grow: 1;
}
.contact-card {
flex-grow: 1;
padding: 15px;
padding-top: 0;
}
.contact-card > p {
line-height: 150%;
}
mat-icon {
font-size: 18px;
}
a {
text-decoration: none;
}
This should work... in component.scss file
.red-text {
color: red;
}
in template
<a href="tel:1-800-123-4567" class="red-text">1-800-123-4567</a>
if that doesn't work then there's an issue somewhere else in your code, maybe the scss is not being loaded in @Component or something like that.
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加