I am using react and I was wondering, I am used to add styling directly in the ClassName.
Let's assume I want to create a seperate css file later to modify the design of the website. For instance this div has a className with the style. What if I want to add a background gradient to it. how do I achieve this from a seperate file. if I add another className it will not work.
<div className="modal-body my-2">
You will probably just have to import your css file with the styles you want to add, then add that same class name in the className tag as you would normally do, it should work without problems
import 'otherStyle.css'
.otherStyles {
//Styles here
}
<div class="currentStyle OtherStyle">
Here you go with a solution
.otherClass {
background: #eee;
}
import CSS from "./path to CSS file";
<div className={`modal-body my-2 ${CSS.otherClass}`}>
import './style1.css';
import './style2.css';
return(
<div className="first second">
</div>
)
//style1.css
.first{
width : 100%;
}
//style2.css
.second{
color : black;
}
Related
I'm learning react and while doing projects came across this situation.
I've below scenario where 2 react child components are under standard HTML element
In case I need to target and style individual react child element how to do it ?
In case of normal HTML elements; I would have assigned className to each individual child HTML element and styled them.
But this approach doesn't work with react component, please suggest how to handle it ?
You can style you react component easily with adding className attribute to them and then in a seprate css file write some stylesheets to style them.
1-first import your css file in you components (e.g. App.jsx or App.js ):
import './index.css'
2- give a className to each components:
<div className="testClass" > </div>
your css file is something like this:
.testClass {
width : 100px;
height : 100px;
background-color: red;
}
<div className='parent'>
<h1 className='one'>
Text 1
</h1>
<p className='two'>
Text 2
</p>
<div
className='three'
>
<div className='three-one' >
one
</div>
<div className='three-two' >
trwo
</div>
</div>
</div>
Now you can add a file as 'style.css' and import it in this component as
import '.style.css';
and add styling inside style.css as you do in normal HTML/CSS. Or you can add styling as
<div style={{ backgroundColor: '#000', border: '1px solid #eee' }}> one </div>
Or you can use CSS modules / styled-components. There are many ways to add styling.
How to add styling in React
Question is not clear but I'll break it down. In angular we can write isolated css for styling. It works pretty well for native html elements. But unlike react, angular wrap our html with custom elements like <app-card>...</app-card>. When I write css for those wrapper elements, it doesn't work .
If I have a post list like
<div class="post-list">
<app-card [post]="post" *ngFor="let post of posts"></app-card>
</div>
If I write css to apply some vertical gap between app-card components in PostListComponent. Well nothing happens.
.post-list app-card:not(:last-child) {
margin-bottom: 2rem;
}
How can I make it work? Or with angular logic, how can I apply vertical gap between angular components
Just add display: block; on your app-card component & it will work as expected.
.post-list app-card {
display: block;
}
.post-list app-card:not(:last-child) {
margin-bottom: 2rem;
}
<div class="post-list">
<app-card>Card 1</app-card>
<app-card>Card 2</app-card>
<app-card>Card 3</app-card>
</div>
You can define encapsulation: ViewEncapsulation.None in your Component like this:
#Component({
selector: 'foo',
template: './foo.component.html',
styleUrls: ['./foo.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class FooComponent { }
Which will treat your .css as the same if you were putting it in the global scope.
To be more accurate, it won't append .fooComponent to each css rule in foo.component.scss.
You can make the iteration in div tag then add your class
<div class="post-list">
<div class="post" *ngFor="let post of posts">
<app-card [post]="post"></app-card>
</div>
</div>
And in your css
.post-list .post:not(:last-child) {
margin-bottom: 2rem;
}
There is no reason it shouldn't work. Just tried to put in some of your code here. https://stackblitz.com/edit/angular-scss-demo-icqrye
app.component.html
<div class="post-list">
<app-new *ngFor="let item of [1,2,3,4]"></app-new>
</div>
styles.scss
.post-list app-new:not(:last-child) p {
margin-top: 2rem;
color: green;
}
And it works perfectly. Are you looking for something else?
And if you want to add the style (margins) to the component directly, you will first need to set the display of the component to block/flex as per requirement.
.post-list app-new:not(:last-child) {
display: flex;
}
I have a Home component with this inside:
<alert type="info">Hello from ng2-bootstrap</alert>
Inside my home.style.scss, I have this:
:host .alert {
background-color: green;
}
which should change the background color to green, but it does not.
The above css code will produce this style:
[_nghost-wjn-3] .alert[_ngcontent-wjn-3] {
background-color: green;
}
and the final HTML looks like this:
<home _nghost-wjn-3="">
<div _ngcontent-wjn-3="" class="card-container">
<alert _ngcontent-wjn-3="" type="info" ng-reflect-type="info">
<div class="alert alert-info" role="alert" ng-reflect-initial-classes="alert" ng-reflect-ng-class="alert-info">
Hello from ng2-bootstrap Sat Sep 17 2016
</div>
</alert>
</div>
</home>
I don't know what the problem is here, but I think the selector is wrong. I'd like the final selector to be:
[_nghost-wjn-3] .alert
instead of:
[_nghost-wjn-3] .alert[_ngcontent-wjn-3]
Or in other words, why is there no _ngcontent-wjn-3 attribute on <div class="alert">...</div>?
Maybe I'm doing the whole thing wrong. What I'm trying to achieve is to customize the CSS of the individual bootstrap components (<alert> in the code above) as provided by the ng2-bootrap library (https://github.com/valor-software/ng2-bootstrap) inside my custom components (<home> in the code above).
I'm using the default view encapsulation (emulated) in the home component.
How can I do that please?
I figured it out myself. This is what I was looking for:
:host /deep/ .alert {
background-color: green;
}
The above code will produce the following:
[_nghost-wjn-3] .alert {
background-color: green;
}
This way I can modify the default styles of a bootstrap class (.alert, in this case) inside of my component <home>.
Source: https://angular.io/docs/ts/latest/guide/component-styles.html
You need:
[_nghost-wjn-3] alert[_ngcontent-wjn-3]
Instead of:
[_nghost-wjn-3] .alert[_ngcontent-wjn-3]
If you go and check your structure, alert tag has the ngcontent... attribute, not his div child with alert class.
I'm new to css and I can't figure out how to position one component inside another in React. I can show them separately, but when I put one inside another. I don't see the one inside. I think the problem is in the css file
#homePage{
section{
h1{
text-align: left; //this is shown
}
//here I want to add the other React component but I don't know how
}
}
And the render method:
<div id="homePage">
<Component1>
<section>
<h1>Hi</h1>
<Component2>
</Component2>
</section>
</Component1>
</div>
Thanks.
From what i understand , you could have the className attribute defined inside your Component2's HTML tags.
class Component2 extends Component{
render(){
return(
<section className="component2styles">
This is Component2
</section >
);
} }
Now , you can change ur style sheet as
#homePage{
section{
h1{
text-align: left; //this is shown
}
//components2 style will be nested here
section.component2styles{
border:1px solid blue;
}
}
}
Or as an alternative you can try inline-styles , seems to be gaining a lot of traction in React development.
render(){
var styleobj={color:'red'};
return( <section style={styleobj} > This is Component 2 </section> )
}
Did you add some class/id to your Component2 like <Component2 className="my-specific-class" /> to style it?
(btw, I hope your css is less/sass one to allow nested styles like you did)
EDIT
By adding className attr. to your Component2, I mean adding it in Component2 render method like
render: function() {
return (
<div id="your-id" className="your-class">
some html here
</div>
);
}
I have a ng-click assigned to an ionic item-divider as follows:
<div class="item item-divider" ng-click="toggleShowingProfile()">
PROFILE
</div>
When this gets clicked it goes grey momentarily. I would like a much more subtle effect. I want it to go slightly lighter in colour so am trying to change the opacity like this:
.item-divider{
background-color: #336688;
color: white;
}
.item-divider:active{
opacity: 0.8;
}
My CSS code seems to make no difference. Is there a way to override the default behaviour?
CSS Only
The easiest way to override it is to give it a custom class and use that as your CSS selector. Also, the item is getting the activated class added to it on click, so :active won't change anything. To override you need to do something like this:
HTML:
<div class="item item-divider custom-item-divider" ng-click="toggleShowingProfile()">
PROFILE
</div>
CSS:
.custom-item-divider.item-divider {
background-color: #336688;
color: white;
}
.custom-item-divider.item.activated {
background-color: #336688;
opacity: 0.8;
}
Codepen demo: http://codepen.io/brandyshea/pen/epEedW
Note: you could also use <ion-item> instead of using a <div> with the item class.
Sass
If you are using Sass, you can override the Sass variables directly:
$item-divider-bg
$item-divider-color
$item-default-active-bg
$item-default-active-border
See these variables here: https://github.com/driftyco/ionic/blob/master/scss/_variables.scss#L311
and here:
https://github.com/driftyco/ionic/blob/master/scss/_variables.scss#L372
You will want to override the variables in your own Sass file, not Ionic's Sass files directly.
Let me know if you have any questions!
<div class="item item-divider" ng-click="toggleShowingProfile()">
PROFILE
</div>