We Keep Coding

Reducing the size of website increases the width

I have YouTube-style header like css, when I reduce the size of my website, the width of my YouTube-style header increases and my icons extend beyond the boundaries of the site, but when trying same thing with https://m.youtube.com/
it does not increase its width no matter how small you make it, any idea on this ?
i dont want to use overflow:hidden; because when website size is reduced then it cuts out my icons, icons should still be visible like in youtube mobile version.
try it here:
https://codesandbox.io/s/material-ui-icon-avatar-example-forked-exzhzj?file=/src/app.css&resolutionWidth=153&resolutionHeight=671
code:
import React from "react";
import ReactDOM from "react-dom";
import { makeStyles } from "#material-ui/core/styles";
import Avatar from "#material-ui/core/Avatar";
import NotificationsIcon from "#material-ui/icons/Notifications";
import MenuIcon from "#material-ui/icons/Menu";
import SearchIcon from "#material-ui/icons/Search";
import VideoCallIcon from "#material-ui/icons/VideoCall";
import AppsIcon from "#material-ui/icons/Apps";
import "./app.css";
export default function EmailAvatar() {
return (
<div className="box-container">
<div className="header">
<div className="header__left">
<MenuIcon />
{/* <img
className="header__logo"
src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Logo_of_YouTube_%282015-2017%29.svg"
alt=""
/> */}
</div>
<div className="header__input">
<input placeholder="Search" type="text" />
</div>
<div className="header__icons">
<span title="Create">
<VideoCallIcon className="header__icon" />
</span>
<span>
<AppsIcon className="header__icon" />
</span>
<span title="Notifications">
{" "}
<NotificationsIcon className="header__icon" />
</span>
<Avatar
alt="Remy Sharp"
src="https://www.shutterstock.com/image-photo/skeptic-surprised-cat-thinking-dont-260nw-1905929728.jpg"
/>
</div>
</div>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<EmailAvatar />, rootElement);
img of problem:
youtube mobile:

overflow hidden add
.header {
overflow: hidden;
}

Your header is inside another container, and has a sticky position
change this for your header class :
.header {
width: 100%;
position: fixed;
top: 0;
left: 0;
}

React re-use a component with different style and layout

I'm new to styling in React. I tried CSS modules and styled components but I'm not able to change layout and styles.
The goal is to have a group of buttons to display as flex on the main page and as an inline with different style attributes in another page by re-using the HomeButtons.js component.
HomeButtons.js is the home page and it has a map() function looping through a button called ButtonCategory.js.
HomeButtons.js renders the map() inside a styled using CSS modules file. ButtonCategory is styled with a CSS modules file as well.
HomeButtons.js is then returned inside a in another class Component called CardsCategory.js. It is in this component that I'm trying to change the display and styl... With a styled Component on the I can show a border but the display attribute doesn't works.With CardsCategory.module.css I can't change the display either...
Not sure what to do... How to change the layout of the re-used component and the style of its nested button component ?
Any feedback is welcome!
HomeButtons.js
import React, { Component } from 'react'
import classes from './HomeButtons.module.css';
import ButtonCategory from '../../components/ButtonCategory/ButtonCategory'
class HomeButtons extends Component {
handleClick = (buttonValue) => {
buttonValue = buttonValue.slice(0, 3).toLowerCase();
this.props.history.push("/" + buttonValue);
};
render() {
const allCategoriesButtons = ["Physics", "Chemistry", "Medicine", "Literature", "Peace", "Economics"];
const allCatMap = allCategoriesButtons.map(button =>
< ButtonCategory
key={button.toString()}
value={button}
name={button}
onClick={e => this.handleClick(e.target.value)}
/>
)
return (
<div>
<div className={classes.container__section}>
{allCatMap}
</div >
</div>
)
}
}
export default HomeButtons;
HomeButtons.module.css
.container__section {
display: flex;
flex-flow: row wrap;
margin: auto;
align-items: center;
justify-content: space-around;
}
ButtonCategory
import React from 'react'
import classes from './ButtonCategory.module.css';
function buttonCategory(props) {
return (
<button
className={classes.b}
name={props.name}
onClick={props.onClick}
value={props.value}
>
{props.name}
</button>
)
}
export default buttonCategory;
ButtonCategory.module.css
opacity: 0.5;
color: red;
font-size: 2em;
margin: 10px 20px 10px 20px;
flex: 1 400px;
height: 3em;
}
CardsCategory
import React, { Component } from 'react';
import axios from 'axios';
import classes from './CardsCategory.module.css';
import HomeButtons from "../HomeButtons/HomeButtons"
import styled from 'styled-components';
const StyledDiv = styled.div`
border: 10px solid orange;
//display: inline; //NOT working
`
class Cards extends Component {
render() {
return (
<div>
<StyledDiv>
<HomeButtons className={classes.test}/>
</StyledDiv>
</div>
)
}
}
export default Cards;
CardsCategory.module.css
.test {
display: inline;
}

You can send styles thru the props and in the component set them as your styles ex.
<MyComponent textAlign='center' ...>
in MyComponent component
<div style={{textAlign: this.props.textAlign}}>
...
</div>
or send whole styles as objects ex.
render(){
const stl = {textAlign: 'center',width:'500px'};
return(
<MyComponent wholeStyle={stl}/>
)
}
and in MyComponent
<div style={this.props.wholeStyle}>
...
</div>

They are 3 ways you can style through props
You can pass an entire style object
Eg:
<MappedComponent style={'display':'flex','alignItems':'center'} />
In the mapped component
Function MappedComponent ({style}){
return (
What's popaining !
);
}
You can style by passing in the specific style you want
Eg:
<MappedComponent textAlign={'center'} />
In the mapped component
Function MappedComponent ({textAlign}){
return (
What's popaining !
);
}
The third way you can style is by defining styles in a CSS file and just passing in the class name
Eg:
<MappedComponent className={''flex-button-style'} />
In the mapped component
Function MappedComponent ({className}){
return (
What's popaining !
);
}
Pick what works best for you and stay consistent with it :) .

CSS getting applied to all files even though not imported

I am dealing with 2 components:
header.js and footer.js.
I also have 2 css files:
header.module.css and footer.module.css.
Both of them use different styling for the a tag.
I import the respective CSS files within each js file, but the a styling in footer.module.css seems to overtake the styling in header.js even though it wasn't imported.
Here is the code:
header.js
import React from "react"
import { Link } from "gatsby"
import "../styles/header.module.css";
const ListLink = props => (
<li style={{display: `inline-block`, marginRight: `1rem`, fontSize: '1.15rem', fontWeight: 'bold'}}>
<Link className="link" to={props.to}>{props.children}</Link>
</li>
)
footer.js
import React from "react"
import "../styles/footer.module.css";
const FooterLink = props => (
<li style={{ display: `inline-block`, marginRight: `1rem`, marginBottom:'0rem', fontSize: '1.05rem', fontWeight: 'bold'}}>
{props.children}
</li>
)
header.module.css
a {
color: var(--textLink);
text-shadow: var(--textShadow);
transition:.2s;
background-image: var(--bgimage);
}
a:hover {
color: #da1e11;
background-image: none;
}
footer.module.css
a{
color: var(--textLink);
text-shadow: var(--textShadow);
transition:.2s;
background-image: none;
}
a:hover {
color: #da1e11;
background-image: none;
}
The background-image property from footer overtakes the one specified in header.

If you are using Gatsby's default <Layout>, it shares <Header> and <Footer> components so, both are loading each CSS in each page as you can see here:
return (
<>
<Header siteTitle={data.site.siteMetadata.title} />
<div>
<main>{children}</main>
<Footer>
© {new Date().getFullYear()}, Built with
{` `}
Gatsby
</Footer>
</div>
</>
)
}
The easiest solution is to wrap the each component in a class to make the CSS only available inside that class, something like this:
import React from "react"
import { Link } from "gatsby"
import "../styles/header.module.css";
const ListLink = props => (
<li className="list__item">
<Link className="link" to={props.to}>{props.children}</Link>
</li>
)
Note: you can even wrap the <Link> inside a <div> for example.
I would suggest removing inline styles if you are using CSS modules to avoid mixing styles and improve readability.
The same applies for the <Footer> component.

According to the documentation it's import something from './something.module.css' and then <Component className={something.error}

Template Literals in React for bootstrap and css modules

Hi I want to use bootstrap and css modules together in react but I am having trouble understanding how. I thought I could use template literals to achieve this purpose.
Here is the code below:
Login.tsx
import React from "react";
import LoginStyles from "../css/Login.module.css";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
class Login extends React.Component {
render() {
return (
<div className={`${LoginStyles.background-color-main} d-flex align-items-center p-4`}>
<Container fluid={true}>
<Row>
<Col>
Hello sir
</Col>
</Row>
</Container>
</div>
);
}
}
This gives me an error in the className, can anyone show me how I am supposed to properly use bootstrap and my own custom css modules together?
My Login.module.css is here:
.background-color-main {
background-color: #87BFFF;
height: 100vh;
width: 100vw;
padding: 0;
margin: 0;
}

The problem here is in property name background-color-main since you have used - casing. you should access the property by LoginStyles["background-color-main"].
Here is the corrected code
import React from "react";
import LoginStyles from "../css/Login.module.css";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
class Login extends React.Component {
render() {
return (
<div className={`${LoginStyles["background-color-main"]} d-flex align-items-center p-4`}>
<Container fluid={true}>
<Row>
<Col>
Hello sir
</Col>
</Row>
</Container>
</div>
);
}
}
I've update the same working code here codesandbox

why react-bootstrap is not adding styles to my grid layout

I am making promodoro clock .I wrote my code using react-bootstrap .it is working but the styles of default classes of bootstrap is not being added to the styles.it is just being stacked over one another.
import React, { Component } from "react";
import "./App.css";
import Grid from "react-bootstrap/lib/Grid";
import Row from "react-bootstrap/lib/Row";
import Col from "react-bootstrap/lib/Col";
class App extends Component {
render() {
return (
<div className="App">
<Grid className="main-container">
<h1>Promodoro Clock</h1>
<Row className="time-setters ">
<Col className="Session-time text-center" sm={6}>
<div>Session time</div>
+
<span>25</span>
-
</Col>
<Col className="Break-time text-center" sm={6}>
<div>Break time</div>
+
<span>5</span>
-
</Col>
</Row>
</Grid>
</div>
);
}
}
.App {
text-align: center;
}
html {
height: 100%;
}
body {
height: 100%;
}
.main-container {
max-width: 800px;
margin: 0 auto;
}

Because you didn't import the css file:
import 'bootstrap/dist/css/bootstrap.min.css'
Install bootstrap before npm install bootstrap --save

If you are going to import multiple things at once, you might want to use this:
import { Grid, Row, Col } from 'react-bootstrap';
Also, make sure you import the stylesheet somewhere on your page, like it says on the docs:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">