I wanna custom my element if he has an attribute...
In pure css i just would use:
<div class='something' data-test='4'></div>
...
.something[data-test] {
background-color: red;
}
but in react i'm failing to convert this code...
<div dataTest={0} className={classes.something} >
Lorem Ipsum
</div>
...
something: {
"&[dataTest]": {
backgroundColor: 'red',
}
}
so, where i'm wrong ?
PS: i tried too:
"& [data-test]": {
"&.[data-test]": {
You need to use className, not class. Then in CSS:
.something[data-test="4"] {
background-color: red;
}
This is how you can access data attributes in react. here is a quick demo
return (
< >
<div className="test" data-id="4">
<h1>Hello dear world</h1>
</div>
</>
);
styles.css
.test {
border: 1px solid red;
}
div::before {
content: attr(data-id);
}
Related
How to apply multiple className in Next js, in which there are variable classsnames as well ?
I'm using component level css approach
Here's my code and what I want to do:
import styles from "./ColorGroup.module.css";
const colors = ["red", "sky", "yellow", "green", "golden"];
const ColorGroup = () => {
return (
<div className={styles.colorContainer}>
<text>Colour</text>
<div className={styles.colorBoxContainer}>
{colors.map((color, index) => (
<div
// variable color class is not get applied, only colorBox is applied, I want both
className={`${styles}.${color} ${styles.colorBox}`}
key={index}
></div>
))}
</div>
</div>
);
};
Goal:
CSS code:
/* code for layout and arrangement above */
.colorBox {
height: 36px;
width: 36px;
}
.red {
background-color: lightcoral;
}
.sky {
background-color: skyblue;
}
.yellow {
background-color: lightyellow;
}
.green {
background-color: lightgreen;
}
.golden {
background-color: greenyellow;
}
But this method is only applying the colorBox className and not doing anything for ${styles}.${color} . How to apply both ?
You should use bracket
<div className={styles.colorBoxContainer}>
{colors.map((color, index) => (
<div
className={`${styles[color]} ${styles.colorBox}`}
key={index}
></div>
))}
</div>
You can try to use the style object, it easier to use it with variables :
<div key={index} className={`${styles.colorBox}`} style={{ backgroundColor: color }} >
</div>
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 want to change div background color based on class name 'cls-editable', which is used by javascript to find the element and then set editable attribute to be 'true' or 'false.
When editable, background is yellow. Otherwise, it's white.
HTML
<div class='cls-editable'>
Hello
</div>
CSS:
.cls-editable, [contenteditable="true"] {
background-color: yellow;
}
.cls-editable, [contenteditable="false"] {
background-color: white;
}
Javascript:
if (this.checkStatus) {
$('.dirs_row').children('.cls-editable').each(function () {
$(this).attr('contenteditable', 'true');
});
} else {
$('.dirs_row').children('.cls-editable').each(function () {
$(this).attr('contenteditable', 'false');
});
}
But, it does not work. What's wrong with css?
Try this
CSS
.cls-editable[contenteditable="true"] {
background-color: yellow;
}
.cls-editable[contenteditable="false"] {
background-color: white;
}
OUTPUT
You got it almost correct! Here is the correct solution:
.cls-editable[contenteditable="true"] {
background-color: yellow;
}
.cls-editable[contenteditable="false"] {
background-color: white;
}
<div class='cls-editable' contentEditable="true">
Hello
</div>
<div class='cls-editable' contentEditable="false">
Hello
</div>
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>
I'm attaching the code for SCSS and react elements below
.chatPane {
height: 100%;
overflow: hidden;
.form-control, .form-control:focus, .form-control:active {
border-bottom: 0;
}
}
render() {
const { isLoaded, messages, handleSendMessage, user } = this.props;
const dialogChildren = (
<div className="modalBox">
<h1 className="modalBox-header">Join chat</h1>
<form onSubmit={this.onCreateUser}>
<input className="modalBox-input" placeholder="Type your name" onChange={this.onNameChange} />
<hr className="modalBox-horizontal"/>
<div className="modalFooter">
<Link className="modalBox-link" to="/chat">close</Link>
<button className="modalBox-button" onClick={this.onCreateUser} type="submit">join</button>
</div>
</form>
</div>
);
I want some help in converting this code into JSS
You need default presets or particularly jss-nested plugin, which replaces & with the parent rule selector.
{
a: {
'& .b, & .c:focus, & .d:focus': {
color: 'red'
}
}
}
Also if you need all selectors global, which is a bad idea, you can use jss-global plugin (also part of default preset)
'#global': {
'.a': {
color: 'green',
'& .b, & .c:focus, & .d:focus': {
color: 'red'
}
}
}