I am setting up two different nav bars, one for mobile and one for desktop version, i currently have the desktop version decently done and working on the mobile version, but when i put both components in a single app.js the mobile navbar.js is reaching out and grabbing properties from my nav < ul < li etc. from the desktop navbar. Is there a way to only include the files that are imported into the js files. In my desktop navbar i have my desktop navbar scss and in my mobile navbar i have my mobile navbar.scss. Here is my app.js setup.
import React, {Component} from 'react'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.js'
import 'util/util.js'
import HomePageBody from '../components/homepage/HomePageBody.jsx'
import Footer from '../components/footer/Footer.jsx'
import Menubar from "../components/menubar/MenuBar";
import SideBar from '../components/sidebar/SideBar'
class HomePage extends Component {
componentDidMount() {
window.scrollTo(0, 0);
}
render() {
return (
<React.Fragment>
<div style={{height: '100%'}}>
<Menubar />
<SideBar />
<HomePageBody />
<Footer />
</div>
</React.Fragment>
)
}
}
export default HomePage
Related
so i used the react awesome slider package to make a slideshow for my home page, i searched for the css file responsible for the package in the modules folder but i can't manage to resize no matter what i try. here's the slider code:
import React from 'react';
import AwesomeSlider from 'react-awesome-slider';
import 'react-awesome-slider/dist/styles.css';
import withAutoplay from 'react-awesome-slider/dist/autoplay';
export const Slider = () => {
const AutoplaySlider = withAutoplay(AwesomeSlider);
return (
<AutoplaySlider play={true} cancelOnInteraction={true} interval={2500}>
<div data-src="https://assets.hardwarezone.com/img/2021/01/model-o-wireless-2.jpg" />
<div data-src="https://i.ytimg.com/vi/RMiBuqYje2w/maxresdefault.jpg" />
<div data-src="https://esportlandet.se/wp-content/uploads/Allting/Artiklar/2019-10-12_dota2uppdatering/00100lPORTRAIT_00100_BURST20191012213318643_COVER-min_2_34-2.jpg" />
</AutoplaySlider>
);
};
i tried putting the slider on a container and style it with css but it just ignore it.
For context, I am using React-Bootstrap's library. Whenever I click on an href in my code, the sidebar will jitter for half a second, almost like it's resetting to its non-styled state, and then return back to its normal form. Does anyone know why this would be? Is it because my code is too slow? Below is my code for the side bar:
import React from "react";
import "../../App.css";
import { Nav, Navbar } from "react-bootstrap";
import ProfileSection from "./ProfileSection";
import ContactBar from "./ContactBar";
import HomeItem from "./SidebarItems/HomeItem";
import BlogItem from "./SidebarItems/BlogItem";
import WorkItem from "./SidebarItems/ProjectItem";
import PhilItem from "./SidebarItems/PhilItem";
import { Container } from "#mui/system";
function Sidebar() {
return (
<Navbar expand="lg">
<Container>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav defaultActiveKey="/" className="flex-column">
<ProfileSection />
<HomeItem />
<BlogItem />
<WorkItem />
<PhilItem />
<ContactBar />
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
)
};
export default Sidebar;
Your code is working fine on my device .. must be some internet or device issues. Also i have checked your code, your code is fine. Do not worry once you deploy it will work fine.
I'm trying to decide what menubar to use and I'm testing react-site-nav which I found it to be one the best menubars in this review.
But I need submenus and all content of the submenus is shifted to the left side of the screen making the contents unaccessible.
I tried a simple example like this:
import React, { Component } from "react";
import { Switch, Link, Route } from "react-router-dom";
import SiteNav, { ContentGroup } from "react-site-nav";
import "./styles.css";
export default class App extends Component {
render() {
return (
<div>
<SiteNav>
<ContentGroup title="About" height="200">
<SiteNav>
<ContentGroup title="Test" height="200">
test
</ContentGroup>
</SiteNav>
</ContentGroup>
</SiteNav>
</div>
);
}
}
Here is a test sandbox where you can see the problem: https://codesandbox.io/s/react-site-nav-mwjkef
When I route my app to another component by using react-router-dom, the CSS doesn't change.
This is a minimalistic version of the code to demonstrate
App.js
import React from 'react';
import Home from './Home';
function App() {
return (
<div>
<Home></Home>
</div>
);
}
export default App;
Home.js
import React from 'react';
import './Home.css';
const Home = () => {
return (
<h1>Home</h1>
);
}
export default Home;
Home.css
body {
background-color: blue;
}
Dashboard.js
import React from 'react';
import './Dashboard.css';
import React from 'react';
import './Dashboard.css';
const Dashboard = () => {
return (
<div className='content'>
<h1>Dashboard</h1>
</div>
);
}
export default Dashboard;
Dashboard.css
.content {
display: flex;
align-content: center;
align-items: center;
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Dashboard from './Dashboard';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter as Router, Route } from 'react-router-dom';
ReactDOM.render(
<Router>
<div>
<Route exact path='/' component={App} />
<Route path='/dashboard' component={Dashboard} />
</div>
</Router>, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: ...
serviceWorker.unregister();
When I do /dashboard, it loads the Dashboard component, but it keeps the previous CSS that was loaded from the Home component that resides the App component. The background stays blue. I want that when I route to another component because I changed the URL, it loads whatever CSS that new component has attached to it and gets rid of whatever CSS was before. Is that possible?
Edit: I have made an example in CodeSandbox to illustrate. It's a little different from the code above due to the limitations of the playground, but the functionality is the same.
From what can be seen, importing as a module ends up importing it globally. If we comment the line import Home from "./Home"; the blue background disappears. Just importing the component, imports the whole CSS despite the CSS being imported in a modular way. I'm not sure if I am missing something.
Edit 2:
Here are the different solutions I tried:
CSS Modules, but the body style was still globally loaded.
Styled components don't let me modify the body or html selectors CSS. They require me to create a <div> element and
then have that element span the whole body which I would style
as if it was the body. Which is a workaround I don't want to use because for that I rather use CSS Modules for the whole body spanning .
Inline styling also doesn't let me modify the body or html selectors CSS. I would also need to use a workaround like a body spanning <div> as in Styled components.
The problem
When you import a css like you're doing here
import './Home.css';
you're importing it in a global scope, which means it will not disappear once imported.
The solutions
CSS Modules
What you want is either CSS Modules, which is used like this:
import styles from './Home.css';
<a className={styles.myStyleClass}>Hello</a>
Styled components
or a CSS-in-js framework such as styled components which is used like this:
import styled from 'styled-components';
const MyStyledElement = styled.a`
color: blue;
`;
<MyStyledElement>Hello</MyStyledElement>
Regular objects / inline styling
or just "regular" CSS-in-js like:
const myStyle = {
color: blue;
}
<a style={myStyle}>Hello</a>
There are plenty of options when it comes to styling, these alternatives are popular ones that I encourage you to explore and see which you enjoy.
After doing some more tests I have concluded that as of now it is not possible to change whatever CSS styles have been applied to a <body> or <html> selector in an React SPA when a CSS file is already loaded and one uses React Router to render other components. I still appreciate the answers and the time taken to help me find a solution. They are still valid answers if we are not talking about the <body> or <html> node in an HTML document. From them I learned about other ways to use CSS in React. I modified the original post with the solutions I tried.
What ended working was modifying the DOM styles with JavaScript whithin the component itself.
Home.js
import React from "react";
const Home = () => {
// Modify the DOM Styles with JavaScript
document.body.style.backgroundColor = "blue";
// Or uncomment below to modify the
// document root background color
// which in this case would be <html>
//document.bgColor = "blue";
// Or modify the root tag style of the document instead of the
// <body> (<html> in this case)
//document.documentElement.setAttribute('style', 'background-color: green');
return (
<div>
<h1>Home</h1>
<form action="/dashboard">
<input type="submit" value="Go to Dashboard" />
</form>
</div>
);
};
export default Home;
Here is a working example:
Where my app wasn't loading style sheets and the like. However, I was importing my assets directly into my index.html entry point.
By replacing the links with absolute paths as per this documentation, my problem was resolved.
For me, this meant changing
<head>
<link rel="stylesheet" href="./style.css" ></link>
</head>
to this:
<head>
<link rel="stylesheet" href="/style.css" ></link>
</head>
I'm not sure if the same thing would work for your import statements, but it is worth a shot.
More info: styles-not-working-with-react-router
Strange behaviour, when I try to make an appbar with this code:
import React, { Component } from 'react';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';
// Needed for onTouchTap
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
export default class App extends Component {
render() {
return (
<MuiThemeProvider muiTheme={getMuiTheme()}>
<div>
<AppBar title="Title"/>
</div>
</MuiThemeProvider>
);
}
}
The result gives me a stacked appbar:
I have absolutly no idea why it does that and did not find any similar issue. I am running on a fresh Meteor instance with React and Material-UI installed via meteor npm install material-ui
EDIT: After investigation, it seems the problem is that the appbar does not have display:flex. Yet, it is impossible to add it manually with style={{display:'flex'}} (nothing changes).
I know this is old, but in case anyone sees this, the way to do this is to nest a <Toolbar /> inside the <AppBar />.
<AppBar /> docs
One quick and dirty fix: <AppBar title="Title" className="appBar" />
And in main.css:
.appBar{
display:flex;
}
Weird behaviour though.