Hello i want to build a toolbar that has an image in the background. I have build two different components. The first is the image component:
import React from 'react';
import thepic from '../mypic.jpg'; // with import
import '../App.css';
const Image = () => {
return (
<img src={thepic} className='the-pic' />
)
}
export default Image;
The second component is the toolbar, i am using react-bootstrap toolbar and i wrap the previous component in the toolbar:
<Image>
<Navbar>
<Container>
<Navbar.Brand href="#home">
React-Bootstrap
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link href="#home">
Home
</Nav.Link>
<Nav.Link href="#link">
Link
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</Image>
I have manage to display the image in the screen but the toolbar is not shown up. It's like the image override the toolbar.
Can anyone help with this ?
The approach is wrong, you shouldn't make a component for a background image and use it like a "slot" for other components. What you can do is siply give a background image to your navbar component as prop, so it will be dynamic.
Related
I'm writing a pet project that needs to be mobile responsive and I have a problem with white space in the Carousel component, I don't know how to remove it, can someone help me?
This is looks like page on PC
https://imgur.com/a/3zwNDnl
This is looks like mobile devices https://imgur.com/a/qEwPDdC
And I want to remove the empty space at the bottom, make the carousel responsive, how can I do that?
Here is my component code
import ...
export default class CarouselBox extends Component{
render(){
return(
<Carousel>
<Carousel.Item>
<img className="d-block w-100"
src={edinburghView1}
alt="Edinburgh_Uni"
/>
<Carousel.Caption>
<Nav.Link href='/EdinburghCity'>
<h3>Edinburgh city</h3>
<p>Edinburgh city view in 2023</p>
</Nav.Link>
</Carousel.Caption>
</Carousel.Item>
)
}
}
Here is my Footer component
import { MDBFooter } from 'mdb-react-ui-kit';
export default class Footer extends Component {
render() {
return (
<>
<MDBFooter sticky="bot" bgColor='light' className='text-center text-lg-left' class="fixed-bottom">
<div className='text-center p-3' style={{
backgroundColor: '#f8f9fa',
marginTop: '0.5%' }}>
© {new Date().getFullYear()} Copyright:{' '}
<a className='text-dark' href='https://t.me/koreechdhs'>
Boiar Kostiatyn
</a>
</div>
</MDBFooter>
</>
)
}
}
I'm somewhat confused what you mean by:
I want to remove the empty space at the bottom, make the carousel responsive, how can I do that?
I'm assuming the red area here you're talking about?
That is because, you have
sticky="bot"
in:
<MDBFooter sticky="bot" bgColor='light' className='text-center text-lg-left' class="fixed-bottom">
which is doing exactly what you want.
If you want the carousel to be full height you will need to add that in the component at that viewport size, reference sizing
I'm working on a react with nextjs project.
I'm using Link to scroll to a specific section on the same page.
Here is one of the components that use Link:
import styles from './section1.module.scss';
import Image from 'next/image';
import Button from '#material-ui/core/Button';
import tought_process from '../../../public/thought_process.png';
import Link from 'next/link';
const Section1 = () => {
return (
<div className={styles.container}>
<div className={styles.left}>
<div className={styles.leftContainer}>
<Link href='#enews'>
<div className={styles.buttonContainer}>
<Button className={styles.buttonstyle1}>Get started</Button>
</div>
</Link>
</div>
</div>
<div className={styles.right}>
<Image
src={tought_process}
className={styles.imageStyle}
alt='how to think about organizing'
layout='responsive'
priority
/>
</div>
</div>
);
};
export default Section1;
And here i mark the element with the id:
<div {...handlers} className={styles.bigBody}>
<NavBar open={menuOpen} toggle={setMenuOpen} scrollY={scrollY} />
<SideMenu open={menuOpen} toggle={setMenuOpen} scrollY={scrollY} />
<div className={styles.sections}>
<Section1 />
<Section2 />
<Section3 id='enews' />
<Section4 />
</div>
Can't figure out what i'm doing wrong.
Multiple clickable elements are wrapping each other. Remove the button and add the anchor element.
<Link href="#enews">
<a>Get started</a>
</Link>
<Link href="#enews">
<a className={styles.buttonContainer}>
<span className={styles.buttonstyle1}>Get started</span>
</a>
</Link>
I'd recommend updating the styles so you can remove the inner span element.
I use a custom link component that does a few things (not shown); one is smooth scroll to hash routes if the browser supports smooth scrolling (not Safari).
import NextLink, { LinkProps } from "next/link";
import { HTMLProps, MouseEvent, FC } from "react";
export const Link: FC<LinkProps & HTMLProps<HTMLAnchorElement>> = ({ as, children, href, replace, scroll, shallow, passHref, ...rest}) => {
const onClick = (event: MouseEvent<HTMLAnchorElement>) => {
if (href.startsWith("#")) {
event.preventDefault();
const destination = document.getElementById(href.substring(1));
if (destination) destination.scrollIntoView({ behavior: "smooth" });
}
};
return (
<NextLink as={as} href={href} passHref={passHref} replace={replace} scroll={scroll} shallow={shallow}>
<a href={href} {...rest} onClick={onClick}>
{children}
</a>
</NextLink>
);
};
I removed new lines to condense the code block
If you went with the above approach, don't include the anchor tag since it's automatically included.
import { Link } from "./custom/path/link"
<Link href="#enews">Get started</Link>
Two points here:
As per the nextjs, passHref has to be used if a custom element is used as a child of Link tag instead of an anchor tag.
As per the same docs value of href should be '/#enews' not '#enews'
I have a centered Toolbar in Material UI that has 3 components. Each component is a button. I want to add a margin around each button. I tried adding the {mt} option to the component button as below, but nothing changed. I've been experimenting with makeStyles, but haven't figured it out.
<Box display="flex">
<Box m="auto">
<Toolbar>
<SeasonComponent>
<WeekComponent>
<GameComponent>
</Toolbar>
</Box>
</Box>
Season component:
return (
<div>
<Button
variant="outlined"
color="primary"
onClick={handleClickOpen}
mt={2}
>
Button text
</Button>
</div>
Here is a picture of the buttons:
You can wrap buttons in a horizontal <Stack>:
<Toolbar>
<Stack spacing={2} direction="row">
<SeasonComponent>
<WeekComponent>
<GameComponent>
</Stack>
</Toolbar>
Here's a simple example: https://codesandbox.io/s/basicbuttons-material-demo-forked-0gpgz?file=/demo.js:234-269
Rather than upgrade my repo to version 5 right now, I just added an invisible button between the buttons. Not a perfect solution, but it solved the problem in the short term.
// SpacerButton.js
import React from 'react';
import Button from '#material-ui/core/Button';
const style = {
minWidth: 1
}
export default function SpacerButton(props) {
return (
<Button variant="text" style={style}>
</Button>
);
}
If I import the full bootstrap css import 'bootstrap/dist/css/bootstrap.min.css';
Then it ruins the css for the rest of my webite so I want to scope it around the variables I need it included around (navbar stuff)
I followed the recommended answer here but it didn't seem to work.
First attempt I tried this:
.bootstrap {
#import 'bootstrap/dist/css/bootstrap.min.css'
}
And the second attempt I followed one of the comments that built a local stylesheet and then I did this
.bootstrap {
#import 'scoped-twbs.css'
}
Wihch didn't work either. (By didn't work, I mean the desired css changes were not visible)
I'm working in NextJS. I have a component that looks like this.
const Navbar2 = () => {
return (
<div className={style.bootstrap}>
<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
<Container>
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="me-auto">
<Nav.Link href="#features">Features</Nav.Link>
<Nav.Link href="#pricing">Pricing</Nav.Link>
<NavDropdown title="Dropdown" id="collasible-nav-dropdown">
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
</NavDropdown>
</Nav>
<Nav>
<Nav.Link href="#deets">More deets</Nav.Link>
<Nav.Link eventKey={2} href="#memes">
Dank memes
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</div>
)
}
I'm not sure what I'm misunderstanding
Firsly, in CSS, #import rules must precede all other types of rules, except #charset rules. Hence you cannot nest them inside a selector. Also, in CSS, you cannot actually "nest" selectors. Refer: CSS #import inside a class
However, you can do so in some CSS preprocessor like SCSS that supports them, and is also supported out of box by Next.js itself. Refer: Sass Support | Next.js
Then you just need to do something like this:
// styles/foo.module.scss
.bootstrap :global {
#import "node_modules/bootstrap/dist/css/bootstrap";
}
// pages/index.jsx
import styles from "../styles/foo.module.scss";
const IndexPage = () => (
<div className={styles.bootstrap}>
...
</div>
);
export default IndexPage;
Note the :global switches to global scope for the current selector respective identifier. In easy words it means that without this your bootstrap classes were being hashed out. So unless they were applied like styles.navbar, they were useless. Refer: Exceptions | CSS Modules
Here is a sandbox.
So I have a search box component that is to be used in the Navigation bar on all pages of the site. I also want to use this component/html in other pages of the site hence I put it inside a component shown below
LocationSearchBox.js
import React, {PropTypes} from 'react'
import {Button,FormGroup, FormControl} from 'react-bootstrap'
import styles from '../scss/components/LocationSearchBox.scss'
export default function LocationSearchBox(props) {
return (
<FormGroup>
<FormControl type="text" placeholder="Search" />
<Button bsStyle="success" type="submit" className={styles.navbarSubmitButton}>Get Weather</Button>
</FormGroup>
)
}
I am using css modules with web pack to convert my scss into css and than generate random styles to use in classnames for the components.
LocationSearchBox.scss
.navbarSubmitButton {
margin-left: 20px;
}
This used inside the component just adds some space between the input and submit button.
This is the NavBar component again with the help of react-bootstrap.
MainNavBar.js
import React from 'react';
import {Navbar, NavbarHeader, NavbarBrand, NavbarCollapse} from 'react-bootstrap';
import {default as Search} from './LocationSearchBox'
import styles from '../scss/components/MainNavbar.scss'
export default function MainNavbar() {
return(
<Navbar fixedTop className={styles.navbarColour} >
<NavbarBrand pullLeft >
<a href='#' className={styles.Brand}>Weather-app</a>
</NavbarBrand>
<Navbar.Collapse>
<Navbar.Form pullRight>
<Search/>
</Navbar.Form>
</Navbar.Collapse>
</Navbar>
)
}
Now I have created a homepage component and I want to use the LocationSearchBox component inside it.
Home.js
import React from 'react'
import {default as Search} from '../components/LocationSearchBox'
import styles from '../scss/components/Home.scss'
export default function Home() {
return (
<div className={styles.center}>
<h2>Enter a city and state</h2>
<Search />
</div>
)
}
The search component inside Home.js, the button has the same margin-left property was the navigation bar so it is moved to the right a bit. I don't want that to happen. I want it only to be applied to the search box used inside the navigation bar but I am unsure of how to do that with CSS modules and React components without creating a separate search box for the navigation bar but I see that as pointless when it will have the exact same code.
I feel like I am not using CSS modules correctly at all, I am not using its philosophy and the point of CSS modules correctly.
It's hard to say what the best approach would be without understanding why it needs to be visually different in those locations but generally I would update <Search /> to accept a new prop to conditionally apply the extra margin.
It could be theme if those two styles are likely to be used many times:
<FormControl type="text" placeholder="Search" />
<Button bsStyle="success" type="submit" className={props.theme === 'foo' ? styles.navbarSubmitButton : null}>Get Weather</Button>
Or if it's more of an override you could provides a buttonClassName prop to add exceptional styles at specific call sites:
<FormControl type="text" placeholder="Search" />
<Button bsStyle="success" type="submit" className={`${styles.navbarSubmitButton} ${props.buttonClassName}`}>Get Weather</Button>