How would one target an element which is part of Formik and has the jsx-prefix?
HTML:
<p>
{isMyProfile ? (
<UserName />
) : (
<PageHeading>
{user?.firstname} {user?.lastname}
</PageHeading>
)}
</p>
CSS:
<button type="button" class="jsx-962024717 jsx-380790680 plain-button">
I got this CSS code from dev.tools, but I am not able to change the CSS of this element and target the UserName and PageHeading.
Related
I know that if I have a <slot /> inside my component, I can then insert content from the HTML, but I don't understand how this works.
For example:
render() {
return(
<div>
<slot />
</div>
)
}
Now, inside my HTML, I can do this:
<my-card>test</my-card>
and "test" will be inserted as a content.
However, if the <slot /> is nested inside other child-elements inside my component, the "test" text is still inserted even if it's not inside those particular elements. How does that work?
For example:
render() {
return(
<div>
<button><slot /></button>
<select>
<option value="one"><slot /></option>
</select>
<p><slot /></p>
</div>
)
}
Now, in my HTML, if I do this:
<my-card>test</my-card>
The text "test" is inserted inside the <slot /> inside the button. But what if I want to add text inside the <option> <slot />? How do I do that?
If I only have one <slot /> inside <option> for example, how do I insert text inside of it from my HTML?
As mentioned in the comments, you can only have a single unnamed slot. Any additional slots have to have a name:
<slot name="outside" />
To add an element inside a named slot you can use the slot attribute:
<my-card>
<span slot="outside">test</span>
</my-card>
See also Stencil's documentation on slots.
I'm new to Tailwind, and I'm not sure if there's a way to solve this edge case. Here is the scenario:
We have different variants listed on the product page(for example different color tags). When you hover we are showing a faded border around the tag, and when you select the variant, the tag becomes active, and its border should get darker.
The problem:
Even when the user clicks on the tag to make it active, the user still sees hover still rather than the 'active' style.
These are the classes I'm using for now
<Tag
clssName={`flex rounded border border-gray-200 bg-white hover:border-gray-400 ${active && 'border-gray-700'}`}
...prop
/>
Now the question is if there's a way to override the hover styles on when the item is active. One way could be to remove the hover class when the item is active, but I was wording if there is a Tailwind way to fix it.
You can add different styles for active and non-active variants.
<Tag
clssName={`flex rounded border bg-white ${active && 'border-gray-700 hover:border-black'}`} ${!active && "border-gray-200 hover:border-gray-400"}
...prop
/>
Well you can use focus utility for this.
Below is the example you can see where button has different behaviour on hover and focus.
<script src="https://cdn.tailwindcss.com"></script>
<div class="p-10">
<button class="p-4 bg-pink-100 hover:bg-pink-300 focus:bg-red-500 focus:border-2 focus:border-red-700">Click </button>
</div>
You can achieve this with a ternary operator on className. By default we have border-gray-200 hover:border-gray-400 when state changes, we replace border-gray-700 instead of border-gray-200 hover:border-gray-400.
const App = () => {
const [active, setActive] = React.useState(false);
return (
<button onClick = {() => setActive(!active)}
className={`flex p-3 rounded border bg-white ${active ? 'border-gray-700' : 'border-gray-200 hover:border-gray-400'}`
}>
{active ? 'Active' : 'Inactive'}
</button>
);
};
const rootElement = document.getElementById('root');
ReactDOM.createRoot(rootElement).render( < App / > );
<script src="https://cdn.tailwindcss.com"></script>
<script crossorigin src="https://unpkg.com/react#18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#18/umd/react-dom.development.js"></script>
<div id="root" class="p-10"></div>
I'm trying to animate the list of cards when it gets re-rendered with a different values (i.e , Popular movies to Searched movies)
I followed the documentation of framer-motion and gave the parent div and the child div the Layout property yet nothing seems to change or happen.
If there's a different way of animating this I would love to hear
I've added the code here below :
the parent div :
<motion.div Layout className='movie-container'>
{movie.map((moviee) => (
<MoviePreview
moviee={moviee}
setFavorites={setFavorites}
favorites={favorites}
setTrailer={setTrailer}
setTrailerWindow={setTrailerWindow}
/>
))}
</motion.div>
the child div :
<motion.div Layout className='movie-card-container'>
<article className='movie-card'>
<h3>{moviee.title} </h3>
<div className='trailer-favorite'>
<button onClick={(e) => onHandleTrailer(moviee.id)} className='trailer-btn'>
Watch Trailer
</button>
<button onClick={() => addFavorite(moviee)} className='heart'>
💗
</button>
</div>
<img src={`https://image.tmdb.org/t/p/w500/${moviee.poster_path}`}></img>
<div className='movie-overview'>
<p>{!moviee.overview ? 'No description available.' : moviee.overview}</p>
</div>
</article>
</motion.div>
Thanks for any kind of help!
I have those purple lines ( as my screen bellow ).
I doing some conditionnal rendering, I'd like to know if I can remove all those purple lines.
I've heard removing all divs and adding React.Fragments might help, this what I've done so far. But the issue is still there.
If anyone could tell where the issue might come from, I'd be grateful !
the main view / Render 1
<div className="user-infos">
<h4><u> Parameters </u></h4>
{ (componentState == "edit") ?
<form >
<Render 3/>
</form>
: (componentState == "index") ?
<Render 2/>
: (componentState == "delete") ?
<React.Fragment>
<p> Are you sure you want to leave us ? </p>
<p> If yes, you have to type your email and press "confirm".</p>
<form>
<input type="text" />
<input type="submit" value="confirm email"/>
</form>
<span>
<button> Delete ur account</button>
<button> Cancel </button>
</span>
</React.Fragment>
: ""
}
</div>
Render 2
return (
<React.Fragment>
<p> Username : John </p>
<p> Timezone : London </p>
<span>
<button> Edit Profile </button>
<button> Delete account </<button>>
</span>
</React.Fragment>
Render 3
return (
<React.Fragment>
<label for="email"> Username :
<input type="text"/>
</label>
<label for="text"> Timezone :
<span>
<select
onChange={options}
<options>
</select>
</span>
</label>
<button type="submit"> Save Profile </button>
<button> Cancel </button>
</React.Fragment>
);
By default, chrome adds styling to your html. In the case of <p>, it adds the following css to your element.
If you want the margin to disappear, you need to set margin: 0; on your <p> element to overwrite chrome's styling.
The purple dash line occurs when there is available space for the elements to expand into. See here. From what I can tell from comparing flexboxes with other display types, the purple dash with purple background is specifically for space inside flexboxes (display:flex in CSS).
Would need to see your CSS to be sure, but I imagine there's justify-content: space-between telling the flexbox to evenly distribute the remaining empty space between the elements as well as flex-direction: column telling the flexbox to stack the child elements vertically.
If that's the case, you can remove justify-content: space-between and use flexbox styling to change things to how you want it to look. I found this website helpful: A Complete Guide to Flexbox
I am new to Angular, and I am trying to style items after the 6th child but it doesn't work. I can color everything, but when I add the nth-child part it doesn't work. Do I have a wrong syntax?
[ngStyle] = "div:nth-child(n+6){'background-color': 'red'}"
<p *ngIf = "status"> Secret Password is Tuna</p>
<div *ngFor="let clickLog of clickLogs"
[ngStyle]="div:nth-child(n+6){{'background-color': 'red'}}">
{{clickLog}}
</div>
<button (click)="clickEvent()">Show Details</button>
<button [disabled]="!checkIfEmty()" (click)="resetUserName()">Reser Username</button>
</div>
You can use pseudo class in the component CSS file.
app.component.css
div:nth-child(n+6) {
background-color: red
}
But you should have proper structure for it in template.
Or you can use index of ngFor.
app.component.ts
<div *ngFor="let clickLog of clickLogs; index as i"
[ngStyle]="{'background-color': i >= 6 ? 'red' : '' }">
{{clickLog}}
</div>