I have the following react component:
import "./App.css";
function App() {
return (
<div className="App">
<div className="TopBar">
<div style={{ color: "green" }}>Rooms</div>
<div>Chats</div>
<div>User</div>
</div>
</div>
);
}
export default App;
However, the TopBar class in App.css:
.TopBar {
display: flex;
flex-direction: row;
border-width: 1;
border-color: gray;
}
seems to not be applied. The divs are showing in a column rather than a row. The border isn't showing either. How to fix this?
For the border to render, you may need to first indicate the border style in your CSS. For example: border-style: solid or border: 1px solid gray.
Otherwise, your code should work. Here is a working sandbox using your code. https://codesandbox.io/s/react-component-styling-oy9m2
Related
I want to display a border when I hover box1.
When I hover, the border is displayed, but for a moment, a black border is displayed.
Also, when I hover, the layout shifts to the bottom.
If anyone knows how to fix this, please let me know.
codesandbox
import "./styles.css";
import styled from "styled-components";
const Box = styled.div`
padding: 9px 18px;
cursor: pointer;
display: inline-block;
color: #222426;
&:hover {
border: solid #e2e6ea 1px;
transition: all 0.2s cubic-bezier(0.08, 0.52, 0.52, 1);
}
span {
cursor: pointer;
font-weight: bold;
font-size: 20px;
line-height: 20px;
color: #222426;
}
`;
const App = () => {
return (
<>
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
<Box>
<span>box1</span>
</Box>
<div>
<span>aaaaaaa</span>
</div>
<div style={{ width: "full", height: "100px", background: "red" }}></div>
</>
);
};
export default App;
In CSS, you can set box-sizing: border-box;
Then set your span's height then it won't shift to the bottom.
The alternative way is making a white border, and change its color when hover.
I found you have "transition: all 0.2s cubic-bezier(0.08, 0.52, 0.52, 1);" This actually causes the black border flicked for a second. If you remove it, the black border will be gone. However, I am not sure what effect do you want to achieve here.
If you add a border with the same background colour and same thickness inside the div i.e border: solid #fff 1px;
The div will not push other component downward anymore.
I create two components in React, and I want to display them both on the App component.
While they do show on the page, I can't use CSS to give each of them flex for example.
I want each component to take half of the screen size, this is what I have:
import "./App.css";
function App() {
return (
<div className="App">
<TopJourney id="Top-journey-section" />
<JourneysSection id="Journeys-section" />
</div>
);
}
export default App;
This is the App.css:
.App {
text-align: center;
display: flex;
flex-direction: column;
}
#Top-journey-section {
flex: 1;
}
#Journeys-section {
flex: 1;
background-color: greenyellow; // I added this just to be sure that the css does not work.
}
What is going wrong here?
You are passing id as a prop to your component, but you are not using it.
Wrong:
<TopJourney id="Top-journey-section" />
Good:
function TopJourney({id}) {
<div id={id}>your component stuff</div>
}
Your selectors id or className only works on native HTML elements, not on Components, try adding styles on HTML dom elements instead. For components, these are just regular props that you can use within the component.
This is a confusion of css flexbox column and row. it should be row and change the id into className, then.... change the css file as well below.
import "./App.css";
function App() {
return (
<div className="App">
<TopJourney className="Top-journey-section" />
<JourneysSection className="Journeys-section" />
</div>
);
}
export default App;
CSS file should be looks like this
.App {
text-align: center;
display: flex;
flex-direction: row;
width:100%;
}
.Top-journey-section {
width:50%;
}
.Journeys-section {
width:50%;
background-color: greenyellow; // I added this just to be sure that the css does not work.
}
I am using mdi-react package and combining it with scss to define some styles but the font-size propert is not working.
Everything else (like color property) is working.
I searched it all over the internet but can't find a solution so finally decided to write my first question on stackoverflow.
And I know I can just use size="8rem" in the icon component itself but I don't want to do that because of some reasons.
Here is my Home.js file:
import React from 'react';
import { Helmet } from 'react-helmet';
import CubeOutlineIcon from 'mdi-react/CubeOutlineIcon';
import { Link } from 'react-router-dom';
const home = () => (
<>
<Helmet><title>Quiz App - Home</title></Helmet>
<div id="home">
<section>
<div>
<CubeOutlineIcon className="cube" />
</div>
<h1>Quiz App</h1>
<div className="play-button-container">
<ul>
<li><Link to="/play/instructions">Play</Link></li>
</ul>
</div>
<div className="auth-container">
<Link to="/login">Login</Link>
<Link to="/register">Register</Link>
</div>
</section>
</div>
</>
);
export default home;
Here is my home.scss file:
#home {
background-image: url('../../assets/img/bg1.jpg');
background-size: cover;
background-position: center;
display: flex;
justify-content: space-around;
height: 100vh;
section {
background-color: rgba($color: #000000, $alpha: 0.7);
padding: $normal $md;
height: 80%;
width: 35%;
}
.cube {
font-size: 8rem; //Not working
color: $orange;
}
}
That's because the .cube is actually assigned to an SVG element and that would require you to use height and width to change it's size. Font ain't gonna work hence.
(I'm assuming that you considered it to be a font-icon or so as the color property got applied to it, but it did so cos fill is set as currentColor, which uses the current text-color.)
According to docs, to change the size of the icon you should use the size property.
Check the following link:
https://github.com/levrik/mdi-react#usage
I have created a React Social Card component using Bootstrap. I want all the cards to be the same size. However, the first card is rendering much larger than the other two. I have tried unsuccessfully to manipulate the CSS to fix this problem but unfortunately, I am a novice with Bootstrap. I have also tried exporting this project into Codesandbox from the Github repository I have it stored in to make it easier to help me find the solution. I am getting this error there: Error importing GitHub repository: Could not find package.json.
Anyway, does anyone know the solution to this problem? Below, I will share a screenshot to illustrate the problem as well as the code for the relevant components and CSS file. Here is the link to the Github repository: https://github.com/jevoncochran/React-Social-Card
Here is the Cards component:
import React, { Component } from "react";
import Card from "./CardUI";
import img1 from "../assets/me-telice-pelo.jpg";
import img2 from "../assets/me-pernambues.jpg";
import img3 from "../assets/me-lucas-walking-pernambues.jpg";
class Cards extends Component {
render() {
return (
<div className="container-fluid d-flex justify-content-center">
<div className="row">
<div className="col-md-4">
<Card imgsrc={img1} title="Convergeance" />
</div>
<div className="col-md-4">
<Card imgsrc={img2} title="Continuation" />
</div>
<div className="col-md-4">
<Card imgsrc={img3} title="Conspiracy" />
</div>
</div>
</div>
);
}
}
export default Cards;
Here is the CSS code:
body {
background: radial-gradient(#e5e5e5, #ffff, #e5e5e5);
}
.card {
width: 20rem;
}
.card:hover {
box-shadow: 5px 10px 20px 1px rgba(0,0,0,0.253) !important;
}
.card-body {
padding: 3rem 0 !important;
}
.card-text {
font-size: 0.9rem;
padding: 0.4rem 1.9rem;
}
.container-fluid .row {
padding: 6rem;
}
.overflow {
overflow: hidden;
}
.card-img-top {
transform: scale(1);
transition: transform 0.5s ease;
}
.card-img-top:hover {
transform: scale(1.4);
}
So, I figured out a solution. I'm not sure it's the best solution out there. But I determined that the problem was that the first image is bigger than the other two images. In my CSS, I just set the maximum height of the all images to the height of the last two (211.938px).
I am using emotion to style and display the equation for compound interest in my React app. My render() returns this:
<div css ={equation}>
<p>
P (1 +</p>
<p css={fraction}>
<span className="num">1</span>
<span className="symbol">/</span>
<span className="bottom">2</span>
</p>
)
<sup>(nt)</sup>
</div>
And outside of my component I have:
const fraction = css`
display: inline-block;
position: relative;
vertical-align: middle;
letter-spacing: 0.0001em;
text-align: center;
.num {
display: block;
padding: 0;
height: 12px;
line-height: 12px;
}
.bottom {
border-top: thin solid black;
}
.symbol {
display: none;
}
`
const equation = css`
font-size: 100%;
.p{
font-size:large !important;
}
`;
The fraction is correctly styled. However, I cannot get the font of the p elements to change. The only way I got it to was by switching the p to h1 elements - but I don't want to do that. I want to be able to specify the font size inside my emotion css styling.
There are a couple of things I noticed as an issue in your code.
You are passing .p { ... inside the equation which is not a class selector but should have been an element selector like p { ...
Your react div has to use a className in order to make that effect applied
Here is the sandbox code changes: https://codesandbox.io/s/emotion-xh53z?fontsize=14
Just copying here for your reference:
import React from "react";
import { render } from "react-dom";
import { css } from "react-emotion";
const fraction = css`
display: inline-block;
position: relative;
vertical-align: middle;
letter-spacing: 0.0001em;
text-align: center;
.num {
display: block;
padding: 0;
height: 30px;
line-height: 12px;
}
.bottom {
border-top: thin solid black;
}
.symbol {
display: none;
}
`;
// Notice the p inside the equation
const equation = css`
p {
font-size: large !important;
}
`;
// Rather than css={}, you should be using className={}
const App = () => (
<div className={equation}>
<p>
P (1 +
<p className={fraction}>
<span className="num">1</span>
<span className="symbol">/</span>
<span className="bottom">2</span>
</p>
)<sup>(nt)</sup>
</p>
</div>
);
render(<App />, document.getElementById("root"));
I also moved the closing </p> tag at the last to ensure it's getting applied as per inline-block
Updated 1:
Here is the latest updated version: https://codesandbox.io/s/emotion-1tjc7
As per their latest blog you should be using:
import styled from '#emotion/styled'
import { css } from 'emotion'
instead of import styled, { css } from 'react-emotion'
Update 2:
In case you cannot use vanilla emotion, then you can consider using the following:
import styled from "#emotion/styled";
/** #jsx jsx */
import { css, jsx } from "#emotion/core";
According to their documentation:
There are 2 ways to get started with the css prop.
Babel Preset (Can't use in Create-React-App or CodeSandbox)
JSX Pragma (This involves to just add the above to lines of code)
I have updated the same codesandbox: https://codesandbox.io/s/emotion-0z3vz