Develop Reference

How do I fix with Next JS and Antd Design Styling not working?

Whenever I try to style Antd Design component ( Layout, Sider and so on ) but it doesn't seems to be working. Therefore there won't be any changes on them. But it works fine on other HTML elements like div, h1, p tags.
Here's my code:
.sidbar{
flex: 1;
background-color: red;
border-right: 0.5px solid rgb(218, 217, 217);
min-height: 100vh;
background-color: white;
}
import styles from "../styles/Sidebar.module.scss";
import React from "react";
import { Layout, Menu } from "antd";
const { Header, Content, Footer, Sider } = Layout;
import {
HomeOutlined,
DashboardOutlined,
TeamOutlined,
} from "#ant-design/icons";
import Link from "next/link";
const Sidebar = () => {
return (
<div>
<Layout className={styles.sidebar}>
<Header>header</Header>
<Layout>
<Sider>left sidebar</Sider>
<Content>main content</Content>
<Sider>right sidebar</Sider>
</Layout>
<Footer>footer</Footer>
</Layout>
</div>
);
};
export default Sidebar;

React Router v6 rendering blank page

I'm kinda new to react and currently learning. I kinda stucked at this stage - As i started writing a ChatInput component for an another component which was already imported to App.js and to Chat.js as well. But as i saved and refreshed the code. The react router is rendering a blank page. While there's no error in the code.This problem didnt showed up and the page was rendering fine inspite of the chat component was there but without ChatInput.js.
But now even if i include the component into App.js. the react router renders a blank page and if i removes component from app.js. The code renders the elements.
Please help as i'm new and cant able to figure out What's the issue.
I'm currently on React-router V6
App.js
import React from 'react'
import './App.css'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Header from './components/Header'
import styled from 'styled-components'
import Sidebar from './components/Sidebar'
import Chat from './components/Chat'
function App() {
return (
<div className="app">
<BrowserRouter>
<Header />
<AppBody>
<Sidebar />
<Chat />
<Routes>
<Route path="/" element=""></Route>
</Routes>
</AppBody>
</BrowserRouter>
</div>
)
}
export default App
const AppBody = styled.div`
display: flex;
height: 100vh;
`
Chat.js
import React from 'react'
import StarBorderOutLinedIcon from '#material-ui/icons/StarBorderOutlined'
import InfoOutlinedIcon from '#material-ui/icons/InfoOutlined'
import { useSelector } from 'react-redux'
import { selectRoomId } from '../features/appSlice'
import ChatInput from './ChatInput'
import styled from 'styled-components'
function Chat() {
const roomId = useSelector(selectRoomId)
return (
<ChatContainer>
<>
<Header>
<HeaderLeft>
<h4>
<strong>#Room-name</strong>
</h4>
<StarBorderOutLinedIcon />
</HeaderLeft>
<HeaderRight>
<p>
<InfoOutlinedIcon /> Details
</p>
</HeaderRight>
</Header>
<ChatMessages></ChatMessages>
<ChatInput channelId={roomId} />
</>
</ChatContainer>
)
}
export default Chat
const ChatContainer = styled.div`
flex: 0.7;
flex-grow: 1;
overflow-y: scroll;
margin-top: 60px;
`
const Header = styled.div`
display: flex;
justify-content: space-between;
padding: 20px;
border-bottom: 1px solid lightgray;
`
const HeaderLeft = styled.div`
display: flex;
align-items: center;
> h4 {
display: flex;
text-transform: lowercase;
margin-right: 10px;
}
> h4 > .MuiSvgIcon-root {
margin-left: 10px;
font-size: 18px;
}
`
const HeaderRight = styled.div`
> p {
display: flex;
align-items: center;
font-size: 14px;
}
> p > .MuiSvgIcon-root {
margin-right: 5px !important;
font-size: 16px;
}
`
const ChatMessages = styled.div``
ChatInput.js
import React from 'react'
import styled from 'styled-components'
import { Button } from '#material-ui/core'
function ChatInput(channelName, channelId) {
const sendMessage = (e) => {
e.preventDefault()
}
return (
<ChatInputContainer>
<form>
<input placeholder={'Message #ROOM'} />
<Button hidden type="submit" onClick={sendMessage}>
Send
</Button>
</form>
</ChatInputContainer>
)
}
export default ChatInput
const ChatInputContainer = styled.div`
border-radius: 20px;
> form {
position: relative;
display: flex;
justify-content: center;
}
> form > input {
position: fixed;
bottom: 30px;
width: 60%;
border: 1px solid gray;
border-radius: 3px;
padding: 20px;
outline: none;
}
> form > button {
display: none !important;
}
`
Index.js
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import { store } from './app/store'
import { Provider } from 'react-redux'
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
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.
serviceWorker.unregister();

Index.js
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import { store } from './app/store'
import { Provider } from 'react-redux'
import * as serviceWorker from './serviceWorker';
import {BrowserRouter} from "react-router-dom";
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
</React.StrictMode>,
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.
serviceWorker.unregister();
App.js
import React from 'react'
import './App.css'
import { Routes, Route } from 'react-router-dom'
import Header from './components/Header'
import styled from 'styled-components'
import Sidebar from './components/Sidebar'
import Chat from './components/Chat'
function App() {
return (
<div className="app">
<Routes>
<Route path="/" element={
<>
<Header />
<AppBody>
<Sidebar />
<Chat />
</AppBody>
</>
} />
</Routes>
</div>
)
}
export default App

Nav bar doesn't display when I use the <Link> tag

I changed the anchor tag to the Link tag and the whole component doesn't display. It is note worthy that I had used the anchor tag and it was properly rendered. However, after changing to the Link tag nothing gets displayed again. Below is what my code looks like:
Navbar component
import React, {Component} from 'react';
import { Link } from 'react-router';
class Navbar extends Component {
render() {
return (
<div className="Navbar">
<ul className="navbar-list">
<li className="active"><Link to={"/home"}>Home</Link></li>
<li><Link to={"/about"}>About Us</Link></li>
<li><Link to={"/pricing"}>Pricing</Link></li>
</ul>
</div>
)
}
}
export default Navbar
css
.navbar-list {
list-style-type: none;
padding: 0;
margin: 0;
overflow: hidden;
background-color: #333;
}
.navbar-list li{
float: left;
}
.navbar-list li Link {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar-list li Link:hover{
background-color: #111 ;
}
.active {
background-color: #4CAF50;
}
App.js file
class App extends Component {
render() {
return (
<div className="App">
<Navbar />
</div>
);
}
}
export default App;

There is some issue in Link from react-router
Instead try using
import { NavLink } from 'react-router-dom';
You code will look like this:
in dependencies of your package.json and do npm i: include:
"react-router-dom": "5.0.0",
import { BrowserRouter as Router } from "react-router-dom";
class App extends Component {
render() {
return (
<div className="App">
<Router>
<Navbar />
<Router>
</div>
);
}
}
export default App;
import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
class Navbar extends Component {
render() {
return (
<div className="Navbar">
<ul className="navbar-list">
<li className="active"><NavLink to={"/home"}>Home</NavLink></li>
<li><NavLink to={"/about"}>About Us</NavLink></li>
<li><NavLink to={"/pricing"}>Pricing</NavLink></li>
</ul>
</div>
)
}
}
export default Navbar;

Maybe you can try to change To prop on string like this :
<Link to="/pricing">Pricing</Link>
Another thing u can try is install react-router-dom instead of react-router.

Image in React component loading on one page but not the other one?

Hi guys very simple question. I have a home page and a room page. The question is why is the logo image in the navbar component loading in the homepage but not in the room page?
The home page is as follows:
import React from 'react';
import Hero from '../components/hero.js';
import NavBar from '../components/navbar.js';
import Services from '../components/services.js';
import FeaturedRooms from '../components/featuredRooms.js';
import Consultation from '../components/consultation.js';
import Footer from '../components/footer.js';
const Home = () => {
return (
<React.Fragment>
<NavBar/>
<Hero/>
<Services/>
<FeaturedRooms/>
<Consultation/>
<Footer/>
</React.Fragment>
);
}
export default Home;
The room page is basic right now and is only:
import React from 'react';
import NavBar from '../components/navbar';
import Footer from '../components/footer';
const RoomPage = () => {
return (
<React.Fragment>
<NavBar/>
<Footer/>
</React.Fragment>
);
}
export default RoomPage;
The route for the logo image is public/images/logo.png. I import the logo with src="images/logo.png" for an img as a styled component in my navbar component.
Both the homepage and the room page are in the same folder: src/pages/home.js and src/pages/singleRoom.js
The navbar is in the components folder as follows: src/components/navbar.js
Here is the navbar.js code:
import React from 'react';
import styled from 'styled-components';
import {Link} from 'react-router-dom';
import {LinkWithNoStyling} from './shared';
const Header = styled.header`
display: flex;
justify-content: flex-end;
padding: 10px 10%;
box-sizing: border-box;
background-color: rgb(251, 251, 251);
`;
const Logo = styled.img`
height: 30px;
/* explanation: margins top and bottom for flex child center vertically, given a margin right of auto and left of 0 we make it stick to the left. */
margin: auto auto auto 0;
`;
const UnorderedList = styled.ul`
list-style: none;
display: flex;
`;
const ListItem = styled.li`
margin-left: 35px;
`;
const MenuAnchor = styled.a`
text-decoration: none;
font-size: 1rem;
font-weight: bold;
color: black;
&:hover {
color: rgb(161, 113, 1);
}
`;
const Navbar = () => {
return (
<Header>
<Logo src="images/logo.png"/>
<nav>
<UnorderedList>
<ListItem>
<LinkWithNoStyling to="/">
<MenuAnchor href="">Home</MenuAnchor>
</LinkWithNoStyling>
</ListItem>
<ListItem>
<LinkWithNoStyling to="/rooms">
<MenuAnchor href="">Rooms</MenuAnchor>
</LinkWithNoStyling>
</ListItem>
</UnorderedList>
</nav>
</Header>
);
}
export default Navbar;
Finally, here is the App.js code:
import React from 'react';
import './App.css';
import {BrowserRouter, Switch, Route} from 'react-router-dom';
import Home from './pages/home';
import NotFound from './pages/notFound';
import Rooms from './pages/rooms';
import RoomPage from './pages/roomPage'
function App() {
return (
<div className="App">
<BrowserRouter>
<Switch>
<Route path="/" component={Home} exact/>
<Route path="/rooms" component={Rooms} exact/>
<Route path="/room/:id" component={RoomPage} exact/>
<Route path="/" component={NotFound}/>
</Switch>
</BrowserRouter>
</div>
);
}
export default App;

You're using a relative url for the src attribute on the Logo component. images/logo.png points relative to the current path, so for your home page, it points to <url>/images/logo.png, but for your room page, it points to <url>/room/:id/images/logo.png. If you change your src to /images/logo.png, then it will always point to the proper file. For more info about html file paths, check here.

React styled-components not applying styles to custom styled components

I'm using react-styled-components to style some custom components in my React/AntDesign application but the styles are not applied to my application.
When I tried reproducing the component in a clean codesandbox.io project the styles were applied successfully.
While some styled-components in my project do work this doesn't, what could be interfering with styled-components?
Here's the code:
import React from "react";
import "antd/dist/antd.css";
import styled from "styled-components";
import { FaMale, FaFemale, FaChild, FaUserFriends } from "react-icons/fa";
import { MdChildFriendly } from "react-icons/md";
import { Row, Col, Modal, Button } from 'antd';
class App extends React.Component {
state = { visible: false };
showModal = () => {
this.setState({
visible: true,
});
};
handleCancel = e => {
console.log(e);
this.setState({
visible: false,
});
};
ProductBtn = styled.div`
box-shadow: 0 0 15px rgba(0,0,0,0.1);
border: 1px solid #eee;
padding: 16px;
text-align: center;
border-radius: 5px;
cursor: pointer;
background-color: #fff
p {
margin-bottom: 0;
margin-top: 5px;
font-weight: bold;
}
`;
render() {
return (
<div>
<Button type="primary" onClick={this.showModal}>New Transaction</Button>
<Modal
title="New transaction"
visible={this.state.visible}
nOk={this.handleCancel}
onCancel={this.handleCancel}
>
<Row gutter={[16, 16]}>
<Col span={8}>
<this.ProductBtn onClick={this.handleProductClicked}>
<FaUserFriends style={{ fontSize: '24px' }} />
<p>Add couple</p>
<small>$70.00</small>
</this.ProductBtn>
</Col>
...
</Row>
</Modal>
</div>
)
}
}
export default App;
This is how it should look and how it looks in CodeSandbox:
This is how it looks in my application, without the widget/button-like styling on the ProductBtn styled component: