I'm using the following instance of a react component in a view:
<Jumbotron>
Lot's of important content
</Jumbotron>
I want an individual style (i.e. a different background image for this instance. So this doesn't work:
<Jumbotron className="individual">
Lot's of important content
</Jumbotron>
Wrapping the instance in a div also doesn't work. How can I do this with simple markup and CSS so that I can simply style the individual class in CSS? AFAIK properties won't help to customize instances...
You can either pass in the style attribute or you can pass through the className attribute in the same way
<Jumbotron className="background--black">
And have your component like this -
const Jumbotron = ({className}) => {
<div className={className}>
Here is the jumbotron
</div>
}
export default Jumbotron
And import a css file that has that class in, if you're using className. But I would probably recommend just using style attribute if it's a one off.
Related
I have five-page folders. each folder has a CSS file and a js file. each js file is importing a component. that component is wrapped in the CSS class name. every time I try to style using an element like body or form, my styling on all other pages is overridden.
the only way I can style the body is by putting the styling in a class and wrapping it around the component. there has to be a better way. I'm trying to animate my screen and it takes a lot of styling elements directly.
import LandingPageComponent from "../../components/LandingPageComponent"
function LandingPage(){
return(
<div className=".landingpage">
<LandingPageComponent />
</div>
)
}
export default LandingPage; ```
Hello guys so this is my problem , i have one page in react called 'Page1.js' that has one <div className='container' >, and this Page1.js imports css style from another file called page1.css with
import './page1.css'.
in this page1.css i make one class called '.container' that has properties like
.container {
background-color:blue
well so far there is no problem, my div is with it's background blue as it supposed to be.
The problem starts when i make another page like 'page2.js' and i make another div with a class having the same name...
So for example if i make one div <div className='container' > in this new 'page2.js' automatically this div will have it's background blue. But i didn't import the file 'page1.css' on my 'page2.js'.
My questions are:
why my page2.js that has no import for my file page1.css is getting the properties for the classes ?
Is there anyway for me to be using classes css with the same name on diferent jsx pages and the classes not be overwriting each other ?
for to escape from this problem now, for each class that i create i put the name of the page in the class like-------------> page1-container {background-color:blue} is that the right thing to do ?
This is because CSS is globally applied when you called import from the previous file.
The import is just a hint for webpack (or maybe some other bundler) to create a separate css file.
To make it private and only available for the file with the import you have to use css.modules <assuming you're using Create react app>
Try to make an experiment. Rename the file from page1.css -> page1.module.css
and import the style from this file like this:
import styles from "./page1.module.css"
and apply it:
<div className={styles.background}>Test </div>
Looking for good practices about angular folder structure I stumble upon this piece of code:
content-layout.component.html:
<div [class]="theme">
<div class="mat-app-background">
<app-nav></app-nav>
<div class="container">
<router-outlet></router-outlet>
</div>
<app-footer></app-footer>
</div>
</div>
As far as I understand, the class tag is used to bind this component HTML with a CSS class.
But the square brackets caught my attention, is there any real difference between the [class] and class for css binding? I can't hit the correct search term/feature name to google it myself
the brackets [] indicate that the value is a property in your component, so instead of saying apply the class theme to the element, it will look for a property theme in your component and use whatever is stored in there.
class="theme" // apply class theme
// Component
public theme = 'theme';
// HTML
[class]="theme" // use what's stored in property "theme"
or
[class]="'theme'" // use string 'theme'
[] is a way to bind the data between ts and HTML, so in this case, the theme is a variable, on the other side container is a direct property
what you understood about class is right, where coming to [class], based on the value, class will be applied to that element. if the value is true or some value then that class will be applied to that element or else it will ignore that class. so basically you are using a specific class for some functionality and not using it for another
eg: <div [class.classOne]="true"></div> // now div element will have classOne class because result is true or some value.
references for better understanding about classes:
https://angular.io/api/common/NgClass,
Difference between [ngClass] vs [class] binding
I'm appending a childitem div to another div inside the same angular component. Then I assign a class to it. (using class list) It succesfully inserts the element and also adds the class to it but non of my css class properties are applied to it.
If I add the element manually inside my html code (including the class attribute) the element is shown correctly.
Why is this happening?
Typescript code:
let parent = document.getElementById('playingfield');
let cactus = document.createElement('div');
cactus.classList.add('cactus');
parent.appendChild(cactus);
HTML code of manually inserting the div:
<div class="cactus"></div>
To apply the runtime css into your html you need to use :host feature of angular.
In your .css or .scss file set css by this way.
:host ::ng-deep .cactus{
// Your css hear
}
I'm working within a React app and have a component that renders numerous span tags. The tags all have different class names and receive all their styling from the linked stylesheet. Except for one class, which is shown below as actions. For some reason, I cannot figure out how to update this one class via the stylesheet.
If I go into Chrome Dev tools and change the styling to the actions, the changes will render. If I create a customStyle object in the component and apply actions with a style attribute pointing to that object, the class will then style as expected.
However, if I add an ID to the actions span tag and try to style from the linked stylesheet, the issue comes back and none of my custom styling is applied to actions. I've tried removing all the styling for the actions class and only rendering a background-color of red, but even that won't take.
Is there some reason I may be missing that allows all other classes in this component to be styled via the stylesheet, but actions cannot?
Thanks in advance for any responses, and please let me know if there's any more additional info I can provide.
Below is component code:
import React from 'react';
const ListHeaderComponent = (props) => {
return (
<span className='header'>
<span className='subheader'}>
<span className='content'>
Hello
</span>
</span>
<span className='subcontent'>
This is where the content goes
</span>
<span className='actions' id="what">
This is where the actions go
</span>
</span>
);
};
export default SplitViewListHeader;
I have gone through the stylesheet thoroughly and the class is only referenced once. Below is a sample of code that won't take that I've tried with the class that doesn't update:
.actions {
background-color: red;
}
CSS scripts when pointed towards an element id is very particular about it. It will only point to that very element and have no effect on the nested sequence. That is why they are only used to point towards very specific elements that have standalone functions; or just use a name. I think that is the reason why id won't work.
What happens if you use class="" instead of className=""?