I am applying inline style to a div in React
If I do
<div style={{ backgroundImage: `url(${process.env.IMAGES}/${ID}.png)` }}>{children}</div>
it works fine, but on changing to
<div style={{ maskImage: `url(${process.env.IMAGES}/${ID}.png)` }}>{children}</div>
the style doesn't even show in the code inspector.
What could be wrong? Thank you
Since the mask needs vendor prefixes to work, you'll need to add them manually:
const Mask = ({ mask, children }) => (
<div style={{
WebkitMaskImage: mask,
maskImage: mask
}}>
{children}
</div>
)
ReactDOM.render(
<Mask mask="linear-gradient(black, transparent)">The big bad fox</Mask>,
root
)
div {
font-size: 2em;
}
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<div id="root"></div>
Related
I am trying to set the background image under my components. But it always is on top, so my elements are under it.
Or in the second variant, all works fine, except that I can't apply blur-xl only to the background. it applies to background and Layout elements.
bg-repeat-y needs me to copy down my image, am I right?
import moons from './../assets/moon.svg'
const Background = ({ children }) => {
return (
<div className='bg-white '>
<div className='min-h-screen min-w-screen bg-repeat-y' style={{ backgroundImage: `url(${moons})` }}>
<div className="div"></div>
</div>
{children}
</div>
);
}
export default Background;
This Background element wraps other elements in Laoyout in react-router-dom
export const AppLayout = () => (
<div>
<Background>
<NewNavbar />
<Outlet />
<Footer />
</Background>
</div>
);
Help me, please!
try this, the blur will be applied between your components & background image
export const AppLayout = () => (
<Background>
<div class="backdrop-blur-xl h-full">
<NewNavbar />
<Outlet />
<footer />
</div>
</Background>
);
if you have any queries, refer to this link
https://play.tailwindcss.com/yX9aAMagRj
For the first variant/approach that you mentioned, you can set the z-index of the background to negative using the class -z-10 . Then your background will not come over your other elements.
How to make the selected div element to be 100% in the inspect element tool in the picture below. I am using display:flex on .dvPageNotFound class and I want to apply height:100% on the div element inside it. If we put display:flex on parent element then all the child elements gets stretched by default, but here I don't get my child element stretched. I don't know why? I am using 12 column grid system same as bootstrap 4 grid Any help would be appreciated.
HERE IS THE CODE -
import React from 'react';
import { Link } from 'react-router-dom';
const PageNotFound = () => {
return (
<>
<div className="dvPageNotFound d-flex">
<div class='col-12'>
<h1 className="heading-lg">Page Not Found</h1>
<p className="my-3">The page you are looking for we coudn't found.</p>
<Link to="/" className="btn btn-black">
Back to Homepage
</Link>
</div>
</div>
</>
);
};
export default PageNotFound;
This worked for me. I added height: 100vh and added m-auto classes which we get from the 12 column grid.
import React from 'react';
import { Link } from 'react-router-dom';
const PageNotFound = () => {
return (
<>
<div className="dvPageNotFound d-flex justify-content-center align-items-center" style={{ height: '100vh' }}>
<div className="m-auto">
<h1 className="heading-lg">Page Not Found</h1>
<p className="my-3">The page you are looking for we coudn't found.</p>
<Link to="/" className="btn btn-black">
Back to Homepage
</Link>
</div>
</div>
</>
);
};
export default PageNotFound;
I'm using Next.js latest version for making my blog website, don't know why show me error, when I'm trying to make my form then show me error like this:
Warning: Function components cannot be given refs.
Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
I'm tried below code:
import React, { useState } from "react";
import { APP_NAME } from "../config";
import Link from "next/link";
import {
Collapse,
Navbar,
NavbarToggler,
NavbarBrand,
Nav,
NavItem,
NavLink,
} from "reactstrap";
const Header = () => {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);
return (
<div>
<Navbar color="light" light expand="md">
<Link href="/">
<NavbarBrand className="font-weight-bold">{APP_NAME}</NavbarBrand>
</Link>
<NavbarToggler onClick={toggle} />
<Collapse isOpen={isOpen} navbar>
<Nav className="m-auto" navbar>
<NavItem>
<Link href="/signup">
<NavLink style={{ cursor: "pointer" }}>Signup</NavLink>
</Link>
</NavItem>
<NavItem>
<Link href="/signin">
<NavLink style={{ cursor: "pointer" }}>Signin</NavLink>
</Link>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</div>
);
};
export default Header;
please give me your valuable suggestion.
The easiest solution may be to wrap your NavLink with a native html element. In your case:
<Link href="/signup" passHref>
<a>
<NavLink style={{ cursor: "pointer" }}>Signup</NavLink>
</a>
</Link>
From the official documentation: if-the-child-is-a-function-component shows the right way when you wrap a custom function component within Link.
Add passHref attribute in Link.
Wrap your custom function component with React.forwardRef.
However, the NavbarBrand is not a component which you can manipulate. You can create a custom component to wrap NavbarBrand. It probably like
const CustomNavbarBrand = React.forwardRef(({ onClick, href }, ref) => {
return (
<NavbarBrand href={href} onClick={onClick} ref={ref}>
Click Me
</NavbarBrand>
)
})
<Link href="/" passHref>
<CustomNavbarBrand>{APP_NAME}</CustomNavbarBrand>
</Link>
Check the valid property which can be passed to NavbarBrand since I haven't use the reactstrap before.
This worked for me:
<Link href="/">
<div className="navbar-brand">
<a>{APP_NAME}</a>
</div>
</Link>
Instead of using the NavbarBrand component I just added the class navbar-brand
Solution :
Wrapp with anchor tag (a tag)
use passHref attribute
<Link href='/' passHref>
<a>
<Image src='logo.png' width="50px" height="50px" />
</a>
</Link>
Wrapping the child component in an a (anchor) tag resolved my issue.
Steps to reproduce :
Wrap around a component with the Link tag from Next JS
import Link from 'next/link'
import Image from 'next/image'
<Link href="/">
<Image width="100%"
height="100%"
src="/logo.png"
alt="Blitztech Electronics Logo" />
<Link>
Solution :
passing the 'important' passHref attribute
Wrapping the entire children in a a tag
There is a better way to solve this issue: whenever you are going to add a child tag under Link tag, such as an Image tag, just wrap them under a div or a tag. Here is the example:
<Link href="/">
<div>
<Image
src={Logo}
alt={TagName.COMPANY_NAME}
width={80}
height={80}
onClick={handleClicked}
/>
</div>
</Link>
Just Wrap it in anchor tag. it will work fine.
<Link href="/">
<a>{APP_NAME}</a>
</Link>
I have using Nuxt.js and Vuetify.js in my project.
I need to adjust v-divider width, so I tried to write css in my code.
But it didn't work.
Does anyone teach me how to change v-divider width in Vuetify components?
<template>
<divider class="test"/>
</template>
<style lang="scss" scoped>
.test{ width:100px}
</style>
vuetify <v-divider> uses border properties. So instead of width you should specify borders.
const opts = {}
Vue.use(Vuetify)
new Vue ({
el: '#app',
vuetify: new Vuetify(opts),
})
.test {
border-width: 4px !important;
border-color: black !important;
height: 100%;
}
body, .container, html {
width:100%;
height: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<div id="app" class="container">
<v-app>
<v-divider class="test" vertical></v-divider>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
Just a typo of <divider/> instead of <v-divider/>.
Alternatively (and not really recommended), you can set the width by specifying the width attribute of <v-divider/> since it uses <hr/> element. However, this approach seems to be deprecated and the best approach is to style it using css.
<v-divider width="100"/>
I am using Next.js (React) with Bootstrap and styled JSX. I am running into an issue where a custom class in Bootstrap for a modal is only styled with css if the css if global. I declare the custom class using the dialogClassName property on the Modal. This is my function component (I am using Typescript):
const Form: React.FunctionComponent<props> = (props: props) => {
const [FormVisibility, FormDispatch] = useContext(FormContext);
return (
<Modal
show={props.isVisible}
onHide={() => {FormDispatch({ type: ActionTypes.CloseForm }) }}
backdrop="static"
dialogClassName="custom-modal"
>
<Modal.Header closeButton >
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={() => {FormDispatch({ type: ActionTypes.CloseForm }) }}>
Close
</Button>
</Modal.Footer>
<style jsx global>{`
.custom-modal {
color: blue;
height: 75vh;
width: 75vw;
max-width: none !important;
}
`}
</style>
</Modal>
);
}
This works just fine. But if I were to change <style jsx global> to <style jsx> then the styling isn't applied. Am I doing something wrong here or is there a better way to do this? It seems weird to me that global is needed even though the component has the class declared locally.
Thanks!
My experience working with Modals is that the modal element is actually extracted out of the DOM tree where your component lives and placed at the top most level right under the body tag.
<body>
// Component where the Modal is declared
<Form />
<div>
// Modal appears here
// Styles are not applied because Modal is not nested within Form component
</div>
</body>
It is possible that your local style is not applied because of this reason.