I'm trying to upload a local image in the project using before but it's not visible. the image is in the same folder as the files.
images from the link from the Internet work fine, but local ones do not(. Please push in which direction to go))
import "./styles.css";
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<div className="qrt"></div>
</div>
);
}
css
.App {
font-family: sans-serif;
text-align: center;
}
.qrt {
width: 50px;
height: 50px;
background-color: red;
}
.qrt::before {
content: "";
width: 20px;
height: 20px;
background-image: url("./image.jpeg");
}.
https://codesandbox.io/s/goofy-rhodes-uzdk0k Link to sunbox
Related
I have a react component called TeamBanner like so
import styles from "./teamBanner.module.css";
import { useNavigate } from "react-router-dom";
import { TeamBannerProps } from "../ProjectTypes.types";
export const TeamBanner = ({
team,
onBannerClick,
showName,
}: TeamBannerProps) => {
let navigate = useNavigate();
const handleOnClick = () => {
navigate(`/${team}`);
onBannerClick();
};
return (
<div
className={`${styles.container} flex theme-light ${
showName ? "" : styles["no-name"]
}`}
title={team}
onClick={handleOnClick}
>
<div>
<img
src={require(`../logos/${team}.svg`)}
alt="logo"
className={`${styles.logo} ${showName ? "" : styles["only-logo"]}`}
/>
</div>
{showName ? team : ""}
</div>
);
};
The teamBanner.module.css file is like so
.container {
margin: 0.25em;
align-items: center;
cursor: pointer;
top: 0;
z-index: 2;
background-color: hsl(var(--color-background));
padding: 0.1em 0.25em;
border-radius: 0.5em;
box-shadow: 0.05rem 0.05rem 0.2rem rgb(0 0 0 / 50%);
font-family: var(--ff-serif);
font-size: var(--fs-200);
}
.logo {
display: inline-block;
vertical-align: middle;
width: 3vmax;
height: 3vmax;
}
.container:hover {
outline: 0.15em solid hsl(240, 90%, 67%);
}
.no-name {
border-radius: 0.25em;
}
.only-logo {
width: 5vmax;
height: 5vmax;
}
I am using it to create a list of team of a page & this works just fine.
However, I want to use it in another place also. In the place, the to now want the .container:hover effect & I want the font properties of the .contaner and width & height properties of the .logo changed.
How can I accomplish this? only changing these items of the module.css? Can any one help? Thanks
I am learning css and react and a bit confused how to display:block for a component when a user clicks a button myButton. And to hide the component when the user clicks it again.
I am using mobile and desktop views and want the button to not show in desktop view, it will only show in Mobile view.
In Mobile view once the user clicks the button toggle component needs to show. That is where I dont know how onclick I can say for Toggle css to display:block to show entire component. Toggle shows in desktop view.
Here is code map.tsx
<div className={styles.controlsContainer}>
<Toggle />
</div>
<div className={styles.button_about}>
<AboutPopup />
<Button id=myButton
type="primary"
icon={<FilterOutlined />}
className={styles.filterbutton} onClick== --- How to say to enable toggle css to block??
></Button>
</div>
Here is how my map.module.scss looks like
.toggle {
width: 244px;
background: #ffffff;
border: 1px solid #d9d9d9;
box-sizing: border-box;
border-radius: 4px;
display: flex;
align-items: center;
float: left;
}
#media screen and (max-width: $mobileMax) {
.toggle {
display: none;
}
}
.button {
&_about {
#include for-desktop {
position: absolute;
bottom: 2em;
right: 2em;
}
#include for-mobile {
position: absolute;
top: 2em;
z-index: 1;
right: 2em;
z-index: 1;
}
}
}
.filterbutton {
width: 40px;
height: 40px;
left: calc(50% - 40px / 2);
top: calc(50% - 40px / 2);
background: $color-blue;
border-radius: 100px;
color: #83888c;
#include for-desktop {
display: none;
}
#include for-mobile {
position: absolute;
top: 4em;
right: 2em;
}
}
----- Update 2
So I did something like this
const [isShow, setIsShow] = React.useState(true);
const handleClick = () => {
setIsShow((prev) => !prev);
console.log(isShow);
};
return
(
<div className={styles.controlsContainer}>
<Toggle
className= {isShow ? {styles.toggle_show} : {styles.toggle_hide}}
/>
)
But I am getting a parsing error on styles.toggle_show Parsing error: ',' expected.eslt
maybe this could help
import React from "react";
import "./styles.css";
export default function App() {
const [isShow, setIsShow] = React.useState(false);
const handleClick = () => setIsShow((prev) => !prev);
return (
<>
<div className={isShow ? "show" : "hide"}>my toggling component</div>
<button onClick={handleClick}>toggle show</button>
</>
);
}
css:
.show {
display: block;
}
.hide {
display: none;
}
IconButton in #material-ui/core/IconButton is showing a weird elliptical background when I hover the cursor over it.
I thought it is a mistake by me, so I just copied the code from material-ui website, but the problem remains.
However, when I created new react project, and created an icon button in it, the background was the usual circle.
I'm new to react and can't figure out what is going on, I'm using icon button without any explicit styling,
App.js
import React, { Component } from 'react';
import './App.css';
import { IconButton } from '#material-ui/core';
import WorkIcon from '#material-ui/icons/Work';
import CssBaseline from '#material-ui/core/CssBaseline';
class App extends Component {
render() {
return (
<div>
<CssBaseline />
<IconButton>
<WorkIcon />
</IconButton>
</div>
);
}
}
export default App;
App.css
.App {
text-align: center;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 80px;
}
.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
}
.App-title {
font-size: 1.5em;
}
.App-intro {
font-size: large;
}
#keyframes App-logo-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.MuiCardContent-root-29 {
display: inline-block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 500px;
height: 300px;
margin: auto;
background-color: #f3f3f3;
}
.login {
margin-top: 50px;
margin-left: 50px;
}
.form-group {
margin-bottom: 35px;
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from "react-redux";
import './index.css';
import App from './App';
import store from "./store/index";
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<Provider store={store}>
<App />
</Provider>, document.getElementById('root'));
registerServiceWorker();
index.css
body {
background-color : #484848;
margin: 0;
padding: 0;
}
h1 {
color : #000000;
text-align : center;
font-family: "SIMPSON";
}
form {
width: 300px;
margin: 50px auto;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
width: 100px;
}
.tableHeader {
background-color: green !important;
}
.header {
color: green;
font-weight: bold;
}
.edit {
height: 30px;
cursor: pointer;
}
.delete {
height: 20px;
cursor: pointer;
padding-left: 10px;
}
This problem persists in my whole project wherever I use icon buttons, and not just with this file only. And when I use this same file in a new project it works as expected: No elliptical backgrounds.
EDIT:
The accepted answer works well. In my also case I tried setting the width in button of index.css to auto and it fixed the error too.
This is what I did to remove the elliptical shape:
<IconButton style={{borderRadius: 0}}>
<DeleteIcon/>
</IconButton>
Now, it will be a rectangular shape when hovered.
I don't know why the above two solutions didn't work for me. So I added margin and width to the parent element and padding-right to the child element in App.css.
//For the buttons on top
button.MuiButtonBase-root {
margin: 10px;
width: 50px;
}
button.MuiButtonBase-root span span {
padding-right: 50px;
}
//For the checkboxes
span.MuiButtonBase-root {
margin-left: 10px;
width: 45px;
}
span.MuiButtonBase-root span {
padding-right: 10px;
}
The problem is the button CSS in your index.css. It is setting the width of all buttons to 100px. IconButton is implemented via a button tag around the icon.
Fixing the look of IconButton is easy -- just remove that button CSS. The more tedious part is that presumably you want that button styling on all your other buttons.
One way to handle this is to change the following in index.css:
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
width: 100px;
}
to be a CSS class rather than targeting all buttons:
.standard-button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
width: 100px;
}
and then change places where you are rendering button elements to use:
<button className="standard-button">
instead of just <button>.
This worked for me
<IconButton style={{height:"45px",marginTop:"20px"}}>
<DeleteIcon/>
</IconButton>
Hi you can override ripple root and child style to change border radius or background color.
const useStyles = makeStyles({
root: {
borderRadius: 0, // <---- icon button root style
'.MuiTouchRipple-ripple .MuiTouchRipple-child': { // <----this should change ripple style when clicked or touched
borderRadius: 0,
backgroundColor: 'red'
},
},
});
<IconButton className={classes.rippleRoot}>
<WorkIcon />
</IconButton>
OR MUI5 with sx props
<IconButton
sx={{
borderRadius: 0,
'.MuiTouchRipple-ripple .MuiTouchRipple-child': {
borderRadius: 0,
backgroundColor: 'red',
},
}}
>
<WorkIcon />
</IconButton>
use height and width with same value to have circular shade on hover-
<IconButton sx={{height:"40px",width:"40px"}}>
<WorkIcon />
</IconButton>
I have a css file (main.css) and I'd like to override it using another css file (overrides.css). But I have problem doing it as they are in different files and they get different hashes.
This is my css:
/* main.css */
.mainContainer {
padding: 16px;
margin: 16px;
background-color: palevioletred;
border-radius: 5px;
}
.mainContainer h1{
color: white;
}
/* overrides.css */
.mainContainer h1{
color: blue;
}
From here, I used Object.assign() to combine css files but it didn't help. This is my component:
import React from 'react';
import Main from './main.css';
import Overrides from './overrides.css';
const Style = Object.assign({}, Overrides, Main);
class Sample extends React.Component{
render(){
return (
<div className={Style.mainContainer}>
<h1>Hello</h1>
<p>Hello CSS modules!</p>
</div>
);
}
}
export default Sample;
I expect my h1 to become blue but it won't. This is my compiled css:
/* main.css */
._1pXpG {
padding: 16px;
margin: 16px;
background-color: palevioletred;
border-radius: 5px;
}
._1pXpG h1{
color: white;
}
/* overrides.css */
.Wmy0p h1{
color: blue;
}
I expect .Wmy0p h1 to be ._1pXpG h1 so it can override. But it won't. Note that if you just paste the content of overrides.css at the bottom of the main css it will work but I need my override css file to be in a separate file.
Thanks in advance
To over ride styles from other file can be made by giving one more specificity from parent div. Mostly specificity solves to override other files CSS.
class Sample extends React.Component{
render(){
return (
<div className={Style.mainContainerDetails}>
<div className={Style.mainContainer}>
<h1>Hello</h1>
<p>Hello CSS modules!</p>
</div>
</div>
);
}
}
/* main.css */
.mainContainer {
padding: 16px;
margin: 16px;
background-color: palevioletred;
border-radius: 5px;
}
.mainContainer h1{
color: white;
}
/* overrides.css */
.mainContainerDetails .mainContainer h1{
color: blue;
}
You can just use vanilla JavaScript to replace that specific css link on the webpage.
I also suggest using an event listener to wait until the page is loaded & then make the replacement.
Here is an example:
function overrideCommonCss() {
var webpageCurrentLink = "main.css", webpageNewLink = "overrides.css", webpageFoundLink, webpageCssTags = 0,webpageAllCssLinks = document.getElementsByTagName("LINK");
if (webpageAllCssLinks) {
for (webpageCssTags = 0;webpageCssTags < webpageAllCssLinks.length;webpageCssTags++) {
webpageFoundLink = webpageAllCssLinks[webpageCssTags].href;
if (webpageFoundLink.indexOf(webpageCurrentLink) !== -1) {
webpageAllCssLinks[webpageCssTags].href = webpageAllCssLinks[webpageCssTags].href.replace(webpageCurrentLink, webpageNewLink);
break;
}
}
}
}
if(window.attachEvent) {
window.attachEvent("onload", overrideCommonCss);
}
else {
window.addEventListener("load", overrideCommonCss, false);
}
have you tried using the !important in css? I believe that seems to be the problem. Below is an example, in plain html:
/* main.css */
.mainContainer {
padding: 16px;
margin: 16px;
background-color: palevioletred;
border-radius: 5px;
}
.mainContainer h1{
color: white;
}
/* overrides.css */
.mainContainer h1{
color: blue;
}
<div class="mainContainer">
<h1>Hello World!</h1>
</div>
As you can see, using !important works pretty well for me...
I am using this boilerplate to create a react based application. I have this basic code:
App.js:
render() {
const styles = require('./App.scss');
return (
<div className="styles.app">
<Helmet {...config.app.head}/>
<Navbar fixedTop className={styles.navbar}>
<Navbar.Header>
<Navbar.Brand>
<IndexLink to="/" activeStyle={{color: '#33e0ff'}}>
<div className={styles.brand}/>
</IndexLink>
</Navbar.Brand>
<Navbar.Toggle/>
</Navbar.Header>
</Navbar>
</div>
);
}
App.scss:
.app {
.navbar{
background: #1b6d85;
}
.brand {
position: absolute;
$size: 40px;
top: 5px;
left: 5px;
display: inline-block;
background: #2d2d2d;
width: $size;
height: $size;
background-size: 80%;
margin: 0 10px 0 0;
border-radius: $size / 2;
}
nav :global(.fa) {
font-size: 2em;
line-height: 20px;
}
}
.appContent {
margin: 50px 0; // for fixed navbar
}
For the Navbar tag, I tried using both className as was done in the template and bsStyle as I saw in some questions online. I havent been able to successfully edit any component of react-bootstrap.
If I have missed the documentation of this in react-bootstrap website, please point me to it too. Thanks.
React-bootstrap requires bootstrap.css as a dependency in your file. Add it in your index.html and it should work fine for you.
See this documentation:
React-bootstrap guide