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>
Related
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
There is a React component using Emotion called OtherComponent:
OtherComponent:
...
return <div css={otherComponentStyles}>
<div className='something'>
</div>
</div>
And another component called MainComponent that uses OtherComponent:
MainComponent:
...
return <OtherComponent css={mainComponentStyles} ... />
What happens in this situation is that OtherComponent properly uses otherComponentStyles. But it ignores mainComponentStyles.
But what I would like to do is to apply style to OtherComponent from the level of MainComponent.
I know i can wrap OtherComponent into a div, ad set css=... to the div. But it is a nasty fix of the problem.
Hence the question: how to apply CSS with Emotion from parent component aka MainComponent?
You are not applying those styles to any html tag, it's not <OtherComponent> which is rendering, it's the <div> which is rendering to the page, so you must apply styles to a valid html tag.
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.
My Angular 8 app has a simple structure:
app.component.html:
<app-main-nav></app-main-nav>
<div id="main-container">
<router-outlet></router-outlet>
</div>
I would like the <app-main-nav> (which is like a conventional "left nav") to be 160px wide, and 100% of the viewport tall. The <div id="main-container"> should fill the rest of rest of the screen.
Ordinarily, I would make the entire page (body?) a flex container, and set the flex properties on the <app-main-nav> and <div id="main-container"> elements.
But, how to do I set the css properties of the <app-main-nav> component? How to I select it in app.component.css?
Just put in your app.component.css something like:
app-main-nav {
/*your css rules */
}
you could also select the component by id or class. Be aware that Angular components are inline by default so you may have to set it's display property to block or something like that.
When a component has some CSS styles, it is natural to use
.my-component-01 h1 { ... }
.my-component-01 h2 { ... }
to scope the styles, but Svelte uses
h1.svelte-hlsza1{color:orange}
h2.svelte-hlsza1{background:yellow}
Is it more robust to actually scope it under a certain class (the top method) instead, because at least inside the HTML markup, the compiled code can just be:
<div class="svelte-hlsza1">
<h1> ...
<h2> ...
instead of repeating the class name every time. (and I think the specificity is the same: 1 class and 1 tag name).
Because Svelte doesn't require a single top level element.
<!-- no problem for Svelte -->
<h1>...</h1>
<h2>...</h2>
In fact it doesn't even require elements at all.
<script>...</script>
<!-- this is the end of the component (still no problem for Svelte) -->
Whatever... Without a root element, the single wrapping class strategy is not applicable.
Also, doing so would not scope only to the current component, but to the current component and its children. Consider this example:
<!-- Scoped.svelte -->
<style>
span { color: red }
</style>
<div>
<span>I should be red</span>
</div>
<slot />
<!-- App.svelte -->
<script>
import Scoped from './Scoped.svelte'
</script>
<Scoped>
<span>I should not be red</span>
</Scoped>
The <span> in App.svelte is not part of the Scoped component, but it is a child of it, in the DOM.
Note: if scoping to the current component and its children is what you want, the trick is to use the :global pseudo selector:
<style>
/* note that you do need a wrapping element, this time, to do that */
div :global(span) { color: blue }
</style>
The div selector style gets scoped, so we're only targeting children of this component (DOM wise), not above.
You're correct that the level of specificity is the same but this rule:
.my-component-01 h1 { ... }
is assuming that there is an element that wraps the h1, in Svelte this is never the case. There is no default parent HTML element to components and there should not be.
If you inspect this REPL for example; despite one of the h1 tags originating from an imported component both h1 tags are right next to one another in the compiled markup like so:
<body>
<h1 class="svelte-1k0q8ta">This is green</h1>
<h1 class="svelte-1wsvnfu">This is red</h1>
</body>
If the natural way were to be the case then Svelte would have to modify the compiled markup to be something like this:
<body>
<someelement class="my-component-01">
<h1>This is green</h1>
</someelement>
<someelement class="my-component-02">
<h1>This is red</h1>
</someelement>
</body>
This would cause unpredictable results when using css-flex or grid which depend on parent-child relationships. So although the repeated classnames for elements may be annoying for someone who inspects the browser often (most users don't) it's a necessary evil that allows CSS to work as expected.