I'm working on my portfolio website and I'm doing it with Gatsby. I've imported a Swiper component, precisely a CubeEffect slideshow.
As I have my background black, I would like to change the Swiper Shadow to red (by default is black) but I'm struggling to access to swiper-cube-shadow::before className, because is an own swiper's className.
I've added css style to the Swiper component, to the SwiperSlide component but I don't know how to access to the swiper-cube-shadow component that should be at the same level of the component and consequently to the className...
I cannot add a selector to a component that I don't know how to select, because is inside the Swiper component with is own name and If I create a new component with the same name will not modify the original component but just create a new one.
On the first link you have a picture of the HTML elements (I don't have the privilege to attach an image yet) with the <div class-name:'swiper-cube-shadow'> that I'm trying to customize.
<Swiper css={css `
[css styles]
`}
<SwiperSlide css={css`
[css styles]
`}>
<Dado2/>
</SwiperSlide>
</Swiper>
class-name:swiper-cube-shadow::before
Related
In my html template I have two common component
If I click on app-headers link its active class is applied.After that If i click on sidenavbar's link its active class is applied. At a time I want only one active class be applied between two child component. what changes can be done from parent component so only one components active class is applied.
I tried by :host ::ng-deep in scss , but I am not able to make it conditional. I want this changes be reflected only, when I click on other components . But its ovverriding child components css.
You could have a flag when they click make that as true and when other options clicked then make it as false and use it in required way. Here's an example below which changes the color based on colorFlag to true or false in css:
<div class="col-12 text-right" style="{{(colorFlag) ? 'color: red;':'color:blue;'}}">
<!-- Your Code Here -->
</div>
I'm very new to web development just let you know.
I'm working on an app with reactJS and i'm trying to style a component I build.
ag-grid provides alot of icons and themes.
I'm trying to use a theme from ag-grid to style my component like this :
<div className='ag-theme-balham-dark'>
<button className="ag-icon-asc" />
</div>
both are calss that are provided in the css I imported but all I get is a black box (not an arrow - which I excpected)
does this approch for adding an icon makes scence?
In my App component I have a navbar. This navbar is visible in all the chilren of my app component. I want to hide the navbar in one of the children. In order to achieve that I decided to use a ternary operator in order to apply a classname on the navbar component.
If the window.location.href is equal to the url of the component in which I want to hide the navbar, then a classname that hides the navbar is applied. However, my code is not working. I can still see the navbar in the component in which I want to hide it. When I inspect the document, I note that the classname that hides the navbar is not being applied. This is my code
<div className={window.location.href==='http://localhost:3001/checkin'
?
"navbar-hide"
:
"navbar"
}>
<Link to="/login">Login</Link>
<Link to="/EventManager">EventManager</Link>
</div>
The classname navbar is present regardless of the window.location.href.
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 referring to the React Lazy Load Image Component.
I need to tweak the display attribute of the image I am rendering with this library. But can't seem to find any way.
I tried to wrap the component with a div and use style={{display: 'inline'}}, but it didn't work.
<div className="ui image" style={{ display: 'inline' }}>
<LazyLoadImage
src={src}
effect="blur"
/>
</div>
I am using this portion of code inside a <Card/> component. The default css of the library contains display: inline-block which is making my image have an extra border at the bottom. I don't want it.
P.S.
I am using Semantic UI for my entire project. I want to use whatever style Semantic is providing me. That's why I need to teak the display attribute of this library.