We Keep Coding

Div is ignoring whatever styling I put on it

We are doing a YouTube clone for a project and I'm trying to style it. Regardless of what I put for styling it disregards it and nothing is applied.
I have tried adding it on the main div, the link, and it still doesn't work.
import React from "react";
import { Link } from "react-router-dom";
const DisplayVideos = ({videos}) => {
return (
<div >
{videos.map((video, index) => {
// get video id
return (
<div style={{'margin-bottom': '80px'}}>
<Link to={`/video/${video.id.videoId}`}>
<div key={index}>
<img src={video.snippet.thumbnails.medium.url} alt="" />
</div>
<div>
<div >{video.snippet.title}</div>
</div>
</Link>
</div>
);
})}
</div>
);
}
export default DisplayVideos;
styles page:
.display-title{
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: rgb(29, 50, 67);
}
.display-description{
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: rgb(0, 0, 0);
}
Link{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
/* CSS just to show the bounds */
border: 2px solid;
background-color: #eee
}
.text {
width: 20%;
inline-size: 10px;
overflow-wrap: break-word;
}

There is no HTML element called Link so you are not targeting anything when you do Link { instead you would need to do:
.link {
// styles
}
Then do <Link className="link" />
https://reactrouter.com/docs/en/v6/api#link
A <Link> is an element that lets the user navigate to another page by clicking or tapping on it. In react-router-dom, a <Link> renders an accessible <a> element with a real href that points to the resource it's linking to. This means that things like right-clicking a <Link> work as you'd expect. You can use <Link reloadDocument> to skip client side routing and let the browser handle the transition normally (as if it were an <a href>).

With react you have to use lowerCamelCase for CSS atributes.
Try marginBottom instead of margin-bottom in your component.
Use className='class1 class2 etc.' if you want to use CSS classes in HTML elements
<div className='class1 class2 etc.'>
Or
<div style={{marginBottom: '80px'}}>

Changing the inner colour of the react bootstrap ProgressBar

Currently, I am using the React-bootstrap ProgressBar in my code in the following way:
<ProgressBar now={20} className="green-progress-bar" height="1px" style={{ height: "30.82px", margin:"10px 0px 10px 0px"}}/>
And in my CSS file, I have something like this:
.green-progress-bar .progress-bar{
height: 100%;
border: 1px solid #FFFFFF;
border-radius: 19.5px;
padding-right: 5px;
// I am aware I can do background-color: green;
// but I want to change it within the JS file
}
I would like to change the colour of the actual bar itself, but my attempts don't seem to be working.
For example, I tried:
<ProgressBar now={20} className="green-progress-bar" height="1px" style={{ height: "30.82px", margin:"10px 0px 10px 0px", "background-colour":"green"}}/>
But this just seems to be changing the outer ProgressBar container as opposed to the actual bar.
Here is a link to the documentation page.
NOTE: I am aware that I can put something like background-color: green; in my CSS file, but I am looking for a solution that changes it within the JS file so that I can later use a variable to change the bar colour.

If you have ref to your bar component you can find it's child by class and then change its color.
useEffect(() => {
if (ref.current) {
const inner = ref.current.querySelector(".progress-bar");
if ( inner ) {
inner.style.backgroundColor = "green";
}
}
}, [ref]);
<ProgressBar ref={ref} now={20} /* other stuff */ />

why hover not working on tr

I try to put hover on tbody and td. It's work well BUT on tr it's not work.
I use inline style( js pattern) not CSS code and using Radium.
Here this is my code
<tr key={id} style={styles.row} onClick={click}>
<td style={stylestd}>
<span style={styles.data}>asdc</span>
</td>
</tr>
AND this one is my style.
row: {
display: 'table-row',
borderBottom: '1px solid #ddd',
height: '20px',
':hover': {
cursor: 'pointer',
backgroundColor: 'red',
},
},
Thank you.

I've posted the answer and i think this will help you to solve the problem.
Write the css code for hover effect seperately.
tr:hover{
cursor: pointer;
background-color:red;
}
<table>
<tr key={id} style="border 1px solid;" onClick={click}>
<td>
<span >asdc</span>
</td>
</tr>
</table>

You are using inline style style={styles.row} and using :hover inside this will not work. You need to define :hover rule in css explicitly.
For more info, see this post.
:hover is a pseudo-selector and, for CSS, only has meaning within the style sheet. There isn't any inline-style equivalent (as it isn't defining the selection criteria).
Alternatively, you can use onMouseOver and bind style on this.
<tr key={id} style={styles.row} onClick={click} onMouseOver={hoverrule}>
There's also library Styled-components, and using it allows you to nest css with hover rule.
See this example extracted from here:
import React from 'react';
import styled from 'styled-components';
const Div = styled.div`
margin: 40px;
border: 5px outset pink;
&:hover {
background-color: yellow;
}
`;
const Paragraph = styled.p`
font-size: 15px;
text-align: center;
`;
const OutsetBox = () => (
<Div>
<Paragraph>Get started with styled-components 💅</Paragraph>
</Div>
);
export default OutsetBox;
I am not giving an example with tr because I don't think you really need this library for just using hover style. If you think it would be better to utilize this library, then I hope you can workout with this solution.

Updated code use this one it will work:
<tr key={id} style={styles.row} onClick={click}>
<td style={stylestd}>
<span style={styles.data}>asdc</span>
</td>
</tr>
You can't use inline css for hover, you have to write internal or external css:
tr{
display: table-row;
border-bottom: 1px solid #ddd;
height: 20px;
}
tr:hover{
cursor: pointer;
background: #red;
}

CSS style is not applying to button in React component

I have my CSS stylesheet in my index.html file where my React app is loaded. In here I have the following CSS values :
#Webshop {
background-color: white;
height: 100%;
width: 100%;
}
and
#Webshop, button {
position: relative
border: 6px solid #232323
z-index: 2
padding: 12px 22px
margin: 0 10px
box-sizing: border-box
font-size: 26px
font-weight: 600
text-transform: uppercase
text-decoration: none
color: #232323
}
Webshop is located in a different file that contains this Render method:
render() {
return (
<div className='Webshop' id='Webshop'>
<li>
<img src="./products.jpeg" width="350" height="350"></img>
<button onClick={this.handleClick} className="addit">Add to cart</button>
<select id="size" onChange={this.change} value={this.state.value}>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="x-large">X-large</option>
</select>
<img src="./product.jpeg" width="350" height="350"></img>
</li>
</div>
);
}
For some reason the CSS applies to Webshop but not to the button. I have other Components in other files the work also. How can I get the CSS to apply to the button in the Render method?

The first two are critical, the last two are advices.
1. remove the comma like so:
#Webshop button {
...
}
2. CSS semicolons are a must, while in JavaScript you can omit them, which is being encouraged to do so in Standard.js rules.
3. The img tags should be self-closing like so: <img />. In fact any element without a text within them should follow as well.
4. Avoid using IDs in your CSS. Read more about CSS Specificity.

Try applying button style separately. Currently the second style applies to #webshop and button as you separated them with comma, which is strange, why would you apply same styling to a div element and a button element? Try doing #webshop button or #webshop > button instead and applying button styles separately.
Also you are missing semicolons at the end of each property in the second style bit which is probably an issue here.

Check https://www.w3schools.com/cssref/css_selectors.asp
Right now you are applying
#Webshop, button {
position: relative
border: 6px solid #232323
z-index: 2
padding: 12px 22px
margin: 0 10px
box-sizing: border-box
font-size: 26px
font-weight: 600
text-transform: uppercase
text-decoration: none
color: #232323
}
to all elements that either have Webshop id or are buttons,
it should look more like
#webshop button {
...
}

Resizing a React navigation bar component when width is reduced?

I have a navigation bar for my webapp with the following css setup:
.navigation {
background: white;
display: flex;
height: 5em;
align-items: center;
padding: 0px 2em;
color: blue;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.075em;
border-bottom: 1px solid #E6E6E6;}
My issue is on mobile, my tabs in the navigation bar get all squeezed together. Is there a way in React that I can detect the width of the page and collapse all my navigation tabs into a dropdown menu? Or is this a CSS thing?

You could handle this in CSS, using proper media queries.
But if you prefer to do it with React, here is how you can implement it, listening to the window "resize" event:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
layoutMode: this.getLayoutMode(),
};
this.onResize = this.onResize.bind(this);
}
componentDidMount() {
window.addEventListener('resize', this.onResize);
}
componentWillUnmount() {
window.removeEventListener('resize', this.onResize);
}
onResize() {
this.setState({
layoutMode: this.getLayoutMode(),
});
}
getLayoutMode() {
return window.innerWidth > 1000 ?
'desktop'
: 'mobile';
}
render() {
return this.state.layoutMode === 'desktop' ? (
<NavigationBar />
) : (
<DropdownMenu />
);
}
}

Seriously, your best option is css. Let react focus on the structure of your DOM and on the interaction. Let css take care of styling.
So you can keep your react code simple like this:
render() {
var myMenu = ['Home','Settings','About us', 'Other stuff'];
return (
<div>
<button className='hamburger'>m</button>
<ul className='menu'>
{myMenu.map(item => {
return <MenuItem key={item} text={item}/>
})}
</ul>
</div>
);
}
And do the styling stuff in css (code below with Sass):
ul.menu
position: absolute
display: flex
flex-direction: row
width: 100%
li.menu-item
flex: 1 0 auto
padding: 10px
margin: 2px
background-color: grey
text-align: center
li.menu-item:hover
background-color: blue
button.hamburger
display: none
padding: 10px
margin: 2px
background-color: grey
#media screen and (max-width : 760px)
ul.menu
flex-direction: column
display: none
li.menu-item
background-color: orange
button.hamburger
display: block
position: absolute
button.hamburger:focus + ul.menu
display: flex
You can find a working demo in codepen here.

If you want to render a drop-down menu on mobile, here's one strategy:
Listen for media query changes in React: http://krasimirtsonev.com/blog/article/Using-media-queries-in-JavaScript-AbsurdJS-edition.
Use that listener to update this.state on the component (ex: this.state.isMobile).
Render different Navigation components based on the media query conditional (ex: this.state.isMobile ? <Navigation type="mobile" /> : <Navigation type="desktop" />).