This is my SCSS style for .br
.br {
&--red {
border: 2px solid red;
}
&--green {
border: 2px solid rgb(32, 170, 8);
}
}
This is my nextjs react code:
import layout from "../styles/layout.module.scss";
export default function Index() {
return (
<div className={layout.br}>
<h1>Khan</h1>
</div>
);
}
How to access this ".br--red" in jsx?
.br{
&--red{
border:2px solid red;
}
}
If you use dash in an object's properties name(in this case, it's class name), for use of it you must use Bracket notation, and your property name should be in ' '(quotation or double-quotation).
<div className={layout['br--red']}>
<h1>Khan</h1>
</div>
You can read more about it in this article.
Adding on the comment above, you can also use dynamic variable in the brackets like so using backticks.
className={styles[`br--${color}`]}
Related
I need to dynamically change a p-card component in my APP. But it's simply not working...
Heres what I've tried so far :
<div class="card-image-comp">
<p-card [class.activeCard]="profileCardSelected === 1" (click)="selectProfileType(1)">
<img src="../../../assets/icons/person.png">
</p-card>
<p>Paciente</p>
</div>
<div>
<p-card [class.activeCard]="profileCardSelected === 2" (click)="selectProfileType(2)">
<img src="../../../assets/icons/estetoscopio.png">
</p-card>
<p>Profissional de Saúde</p>
</div>
...
My function:
selectProfileType(numCard: number){
this.profileCardSelected = numCard;
}
This part is working just fine, the issue is that the component is not obeying it's new class.
I've tried the normal stuff:
.activeCard {
background-color: black;
}
...
div {
.activeCard {
background-color: black;
}
}
...
.personalCardComp {
.activeCard {
background-color: black;
}
}
... and even some nasty stuff
:host {
::ng-deep .activeCard {
background-color: black;
}
}
...
:host {
::ng-deep p-card.p-element.activeCard {
background-color: black;
}
}
As I said before, the class is applied correctly, but the card only changes when I apply the css to the div children of the p-card...
Basically if I could apply the class to this div children It would work just fine... Is there a way to do so? Apply the class to p-card but the div children obbey...
Be sure to properly import your .scss file and then:
:host ::ng-deep {
.p-card.p-component {
background: black;
}
}
i created a basic react app like this:
import React from 'react';
import style from './Button.module.scss';
export default class Button extends React.Component {
render() {
return (
<button className={[style.class, 'awesome', 'great'].join(' ')}>
hello world
</button>
);
}
}
the css/scss:
.class {
background: pink;
color: red;
/* not working */
&:is(.awesome) {
border-width: 2px;
}
/* not working either */
&.awesome {
border-width: 2px;
}
/* works */
&:not(.great) {
border-style: dotted;
}
}
the problem:
the sublass .awesome is not working, whereas .great works fine.
Can you fix the code so the .awesome will work.
I need some subclass of the .button, so i can toggle them at runtime.
this is the generated css on the browser,
the .awesome is not generated but .great generated.
.Button_class__1tDJY:not(.Button_great__3yeAv) {
border-style: dotted;
}
.Button_class__1tDJY {
background: pink;
color: red;
}
you should pass the classes declared at your css modules through your styles object, instead of passing a string:
<button className={[styles.class, styles.awesome, styles.great].join(' ')}>
hello world
</button>
I have two components, each with a CSS module:
src/_components/ProfileImage.tsx
import styles form './ProfileImage.module.scss';
function ProfileImage () {
return (
<img className={styles.profileImage} />
)
}
export default ProfileImage;
src/_components/ProfileImage.module.scss
.profileImage {
height: 50px;
width: 50px;
}
and
src/ProfilePage/Profile.tsx
import styles form './ProfilePage.module.scss';
function ProfilePage () {
return (
<ProfileImage className={styles.profileImage}
)
}
export default ProfilePage;
src/ProfilePage/Profile.module.scss
.profileImage {
composes: profileImage from '_components/ProfileImage.module.scss';
outline: 1px solid red;
}
This doesn't seem to work, not even when I use relative paths.
SCSS doens't recognise the property composes.
Is there a better way to compose modules than this? I am switching from CSS-in-JS to CSS modules, but I really miss how easy it was to compose components with emotion or styled-components.
in src/ProfilePage/Profile.module.scss
#import '/ProfileImage.module.scss' /* your ProfileImage scss file path */
.profileImage {
#extend .profileImage;
outline: 1px solid red;
}
this will work
I'm working off of the documents from the "Learn" section on the Next.js website.
The CSS below does not get applied to the component if using the jsx style tag; however, if I add the CSS as an object literal attribute it gets applied. How can I to get the jsx style tag CSS to be applied?
This won't be applied:
import Layout from "../components/Layout";
export default function Post() {
return (
<Layout>
<div className="container"> This is a div. <div/>
// This wont be applied
<style jsx>{`
.container {
margin: 20;
padding: 20;
border: "1px solid #DDD;
}
`}</style>
</Layout>
);
}
But this works:
import Layout from "../components/Layout";
const layoutStyle = {
margin: 20,
padding: 20,
border: "1px solid #DDD"
};
export default function Post() {
return (
<Layout>
<div className="container" style={layoutStyle}> This is a div. <div/>
</Layout>
);
}
When using the object attribute the unit is not supplied and the border field value is in quotes.
const layoutStyle = {
margin: 20,
padding: 20,
border: "1px solid #DDD"
};
For it to work with JSX CSS it needs to be normal CSS syntax!
.container {
margin: 20px;
padding: 20px;
border: 1px solid #DDD;
}
Try this:
<style>{`
.container {
margin: 20;
padding: 20;
border: 1px solid #DDD;
}
`}</style>
This is not a good approach if you are using the next js on your website. You should use the next css in your project that is so easy to use and maintain your CSS files as well.
Here is a documentation link to use next css.
https://github.com/zeit/next-plugins/tree/master/packages/next-css
I have HTML table in Angular web app.
Get the data from the database via service and display it as text.
One of the columns is Status, so I need to present that variable not as text,
but as a circle of certain color, so if that cell value is "green",
it should show as green circle.
Here is what I have.
CSS (part of Component Styles):
:host ::ng-deep td.circle {
text-align: center;
font-size: 0;
background-color: RED; <--- need to pass param here
}
I define that column as:
.circle {
border-radius: 50%;
height: 24px;
width: 24px;
}
HTML:
<app-table [attrs]="serviceapi" [monthSelected]="monthSelected" ></app-table>
TS for that table:
In constructor:
this.data = {
headers: [],
rows: []
};
ngOnInit() {
this.tableMetricsService.getTableMetrics(
JSON.parse(this.attrs).api,
this.monthSelected
).subscribe(response => {
this.data = response;
}
);
}
Any idea how to "translate" cell value into the CSS background-color ?
TIA,
Oleg.
You could put a data attribute on the html and write a corresponding selector:
[data-status="green"] {
background: green;
}
[data-status="red"] {
background: red;
}
<div data-status="green">Green</div>
<div data-status="red">Red</div>
But I don't see any advantage to this approach over using a regular css class:
.green {
background: green;
}
.red {
background: red;
}
<div class="green">Green</div>
<div class="red">Red</div>
Here is what worked for me:
<div *ngIf="cell.styleClass == 'circle'" [ngStyle]="{'background-color': cell.value}" [ngClass]="cell.styleClass">
</div>