I use react bootstrap tabs component but when i use a custom css within this nav-link with a custom parent class indicator its not working.
<Tabs
defaultActiveKey="signup_renter"
id="uncontrolled-tab-example"
className="mb-3 approval-details-tab"
>
<Tab eventKey="signup_renter" title="About Car">
<div className="signup-renter">
this is signup renter tab
</div>
</Tab>
<Tab eventKey="signup_host" title="Details">
<div className="signup-host">
this is signup host tab
</div>
</Tab>
</Tabs>
Here is my css parent indicator:
.approval-details-tab > .nav-tabs .nav-link.active::before {
content: "";
background: #524eb7;
width: 30px;
height: 3px;
position: absolute;
top: 63% !important;
}
I use .approval-details-tab class as a parent class of nav-tabs but without parent class it works. but i need a parent class for separate design.
From the React-bootstrap documentation:
Because React-Bootstrap doesn't depend on a very precise version of Bootstrap, we don't ship with any included CSS. However, some stylesheet is required to use these components.
How and which Bootstrap styles you include is up to you, but the simplest way is to include the latest styles from the CDN.
CDN link: https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css
Add CDN at index.html file inside tag like this:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"/>
Now, to override any class of `react-bootstrap', you have to use "!important" on your custom css. If you want to override the background color, use "!important" beside that css property.
Example:
.approval-details-tab{
background: #524eb7 !important;
}
To get more clear understanding of your problem, please mention which css-property you want to override of a bootstrap class. Thanks!
In React, the parent-children relationship is a bit complicated. Although a component in React seemed to be the direct child of another component, when translated to normal HTML, it doesn't. For example, take a look at this code
<div className="parent">
<Tabs className="children">
some other components inside
</Tabs>
</div>
Does div the direct parent of the component Tabs? It is not. The above code, when being translated to normal HTML component would look roughly like this
<div className="parent">
<div>
<div className="children">
some other components inside
</div>
</div>
</div>
As you can see, the element that bears the className children is no longer the direct child of the parent component. That is why in React, it is not a good idea to style components using parent-direct children relationship.
If you just want to do this way of styling because you want to avoid naming conflict, you can try out CSS Module
If you want to read the detail on how the Tabs component behave, you can read the source code
Related
I'm using a UI framework called Element UI and I'm using their tables for my project. I need the body of the tables to have some padding at the top to make room for a filter input that is put at the top before the rows begin. Although, not all tables in my project will have this filter input so not all tables need this padding, my issue is that I'm targeting a class that comes from Element UI (not one that I created myself) and the only file that the code acknowledges this selector is within App.vue. Trying to put this styling in the individual files doesn't work. I'm trying to only remove this padding for one certain file and keep the padding for all others.
App.vue file
.el-table__body {
padding-top: 48px;
}
I have been using element UI for 2 years, and I had the same problem. The thing in Element-UI styles is that they can be styled inside their own component.
Let's say for your case, you can style only the "el-table" by adding "custom class" to it and still can use scoped, but what's inside "el-table__body" cannot be styled when you use scoped.
And if you really want to style, remove "scoped" from "style", like this:
<style>
.el-table__body{
padding-top: 200px;
}
</style>
Note: the above trick will apply the styles to all other tables when you come to this component and then open any other component which has the same "el-table__body" class.
To avoid the effect on other component's tables style, add a custom class name and then target the el-table__body.
For example:
<el-table
:data="tableData"
class="stack-table"
style="width: 100%">
<el-table-column
prop="date"
label="Date"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="Name"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="Address">
</el-table-column>
</el-table>
And CSS style target like this:
.stack-table .el-table__body{
padding-top: 200px;
}
I am trying to style an HTML element inside the component from the Fluent UI React library.
What I want to do is put the "On" / "Off" text to the left of the toggle rather than on the left. When I look at my "compiled" code I can see that the component is translated into:
<div>
<label></label>
<div id="target-me">
<button>
<span></span>
</button>
<label></label>
</div>
</div>
I want to add an inline-flex to the target-me div and set flex-flow property to row-reverse in order to get the button element to the right of the label element. The problem is, I can't manage to target the "target-me" div in my code.
How can I achieve this without rewriting a custom component ?
Thanks!
Ok, well I found the answer to my own question so here it is:
<Toggle styles={{ container: { flexFlow: "row-reverse" } }} />
Essentially you can target different parts of the component (root, container, label..) by using the styles property. Use VS Code's Intellisense to find out what elements you can target inside the component and then just give it some regular CSS-in-JS that you want.
I am still new in angular 7. I have a form with title directive and div. I am trying to set both of them in same row with 49% width in side the form. The div style work fine but in the title component doesn't take the style. the problem is i need to change the title directive only in the current form. is there any way to do that?
many thanks
<form #taskForm="ngForm" (ngSubmit)="onSubmit()">
<my-title [style.width]='49%' [title]="'title.page'" [wikiUrl]='wikiUrl' icon="work">
</my-title>
<div [style.width]='49%'>
<button>Save</button>
</div>
</form>
Add px which almost equals to 49%.
<div [ngStyle]="{'width.px': 490px}">
<button>Save</button>
</div>
If you want to set a width in percent you can also use the following syntax:
<div [style.width.%]="49">...</div>
The real problem however seems to be that the 'my-title' component is not responding to the width rule. This is probably because 'my-title' is not a known html tag and so there is no default rendering behavior in the browser for it.
If you want your component tag to behave like a block element (that is what a div element is rendered like) then you just have to apply the rule display: block; to it.
Since your component tag is not part of your template, but the wapper for it you can either apply the following style to the parent component that is using the 'my-title' component:
/* this will not work inside the css file of the 'my-title' component:*/
my-title {
display: block;
}
...or you can use the :host selector in the css/scss file of the 'my-title' component, which is probably better in this case:
:host {
display: block;
}
I would like to modify quite a large amount of styles on a page through a customisable panel. When a user clicks an option, the content on the page will completely change based on whatever was clicked.
This cannot be a scenario where a class is appended to a parent element and use CSS/LESS to adjust accordingly. For this scenario (for requirement reasons) the CSS needs to be internal on the angular component HTML.
Is it possible to have a value in the component TS like this:
myNewColour: "red"
That can then be used in an internal style sheet that's inside my angular component.html like this?:
<style>
.myContainer { background: myNewColour }
</style>
<!-- HTML Content -->
<div class="myContainer"> Stuff </div>
Any help with this would be appreciated! :)
"Internal in the HTML template" is called inline style ;) Apart from that, you can use ngStyle like so
<tag [ngStyle]="{'background': myNewColour}"></tag>
EDIT if it makes your code too long, what you can do is simply
let customStyle = {
'background': this.myNewColour
};
And in your tag, simply
<tag [ngStyle]="customStyle"></tag>
I'm using an existing React component (i.e. Paginate) which itself makes use of some components (ie. Button). Currently, the Button component sets its class to 'X' which is defined in a css file. I'd like to override the properties of 'X' when I'm using the Paginate component. Is there a way this can be done?
I haven't used react, but could you possibly stick a parent div around the paginate component and reference the css as .parent .x { attributes }?
Alternatively, you could provide your own over ride CSS file that's loaded after the react styles.
.parent .x {
/* news styles */
}
<div class="parent">
<div class="paginate">
<div class="x"> x </div>
</div>
</div>