I am having an issue with applying padding (and styles) to my Material UI component.
I have this component here:
import "./css/Landing.css";
import { Button } from "#mui/material";
function Landing() {
return (
<div className="Background">
<div className="centerdiv">
<div>
<Button className="Login-Button" variant="contained">
Register
</Button>
</div>
<div>
<Button variant="contained">Login</Button>
</div>
</div>
</div>
);
}
export default Landing;
This component references the following CSS file and Login Button Class:
.Background {
background-color: black;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
height: 100%;
width: 100%;
}
.wrapper {
text-align: left;
background: gray;
/* so we can actually see what's happening */
padding: 20px;
position: absolute
/* Give us some breathing room */
}
.centerdiv {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
}
.Login-Button {
background-color: #ffffff;
padding: 10px;
}
When I attempt to reference the LoginButton class, the padding for my Material UI Button doesn't work. As well as the styles.
What is the best practice way of adding styles to my buttons?
Its probably because the styles inside Button take precedence over yours due to CSS specificity. Probably you can check this by using the dev tools to see if your styles are crossed out.
You need to use the material-ui theming solution: https://mui.com/material-ui/customization/theme-components/
You can create a styled button using 'styled' from MUI
import styled from "#mui/system/styled";
import Button from "#mui/material/Button";
export const LoginButton = styled(Button)(({ variant }) => ({
":hover": {
backgroundColor: "pink"
},
border: "solid red",
backgroundColor: "black",
width: "200px",
color: "white",
padding: "20px",
boxShadow: "3px 3px 3px pink"
}));
export default function App() {
return (
<div>
<LoginButton>LOGIN</LoginButton>
</div>
);
}
CodeSandbox : https://codesandbox.io/s/styled-button-variant-mui-sofl-forked-nwyxde?file=/src/StyledButton.js
Related
i'm trying to convert a normal javascript game code to react but i'm finding a lot of problems that i don't know how to solve (i'm not good with web development so, sorry if i misspell something)
what i want is that an image become 100% adjusted to the viewport and another image, which is a game character, stay in front of it, but the css styles aren't applying to them
this is my javascript code and my css:
import './App.css';
import Spring from './components/Spring'
import Background from './components/Background';
function App() {
return (
<div className="game">
<Background className="fundo"></Background>
<Spring classname='Spring'></Spring>
<div className='message'>Press enter to start</div>
<div class="score">
<span class="score_title"></span>
<span class="score_val"></span>
</div>
</div>
);
}
export default App;
and this is my css for now:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.game {
height: 100vh;
width: 100vw;
}
.Spring {
height: 100px;
width: 160px;
position: fixed;
top: 40vh;
left: 30vw;
z-index: 100;
}
.fundo{
height: 100vh;
width: 100vw;
z-index: 99;
}
.pipe_sprite {
position: fixed;
top: 40vh;
left: 100vw;
height: 70vh;
width: 6vw;
background-color: green;
}
.message {
position: fixed;
z-index: 10;
height: 10vh;
font-size: 10vh;
font-weight: 100;
color: black;
top: 12vh;
left: 20vw;
text-align: center;
}
.score {
position: fixed;
z-index: 10;
height: 10vh;
font-size: 10vh;
font-weight: 100;
color: goldenrod;
top: 0;
left: 0;
}
.score_val {
color: gold;
}
if anyone want to see my react components that i'm trying to apply the style, there it is:
import React, { Component } from 'react';
import background from './sprites/red_sun_ultimate.gif'
class Background extends Component {
state = { }
render() {
return <img src={background} alt='Background'></img>;
}
}
export default Background;
import React, { Component } from 'react';
import springSprite from './sprites/Spring_2.0.gif'
class Spring extends Component {
state = { }
render() {
return <img src={springSprite} alt='Spring'></img>;
}
}
export default Spring;
i really don't know what to do by this point, my styles are applying to the score val and etc but i just can't figure out why the styles aren't applying to the other things too
the result i'm getting is:
this is what i'm getting
I want to use the components i made multiple times while rendering dynamic content
but when i try to render them they just stack up on themselves in the same position
whenever i render the component, multiple times, i dont even see the sliders and the >title stacks up on eachother
import React from "react";
import styled from "styled-components";
import ellipse from "../img/ellipse.png";
import Range from "./Range";
function RangeComp() {
const titlesArr = [
"Cybersecurity",
"Developer",
"DevOps",
"Designer",
"Project Manager",
"Product Manager",
"Marketer",
"Writer",
];
console.log(titlesArr);
return (
<Container>
<Circle />
<Heading>Score your level of interest in these job titles:</Heading>
<Divs>
<Div1>
<Range title={titlesArr[0]} />
<Range title={titlesArr[1]} />
</Div1>
<Div2></Div2>
</Divs>
</Container>
);
}
export default RangeComp;
const Container = styled.div`
position: absolute;
width: 980px;
height: 583px;
left: 650px;
top: 220px;
box-shadow: 0px 4px 29px #f0f3ff;
border-radius: 35px;
:hover {
border: 1px solid black;
}
`;
const Circle = styled.div`
position: absolute;
background-image: url(${ellipse});
width: 30px;
height: 30px;
right: 1.8%;
top: 2%;
background-repeat: no-repeat;
background-size: cover;
`;
const Heading = styled.div`
position: absolute;
width: 400px;
height: 31px;
font-family: "HelveticaNeueCyr";
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 155.02%;
color: #30302e;
left: 8%;
top: 10%;
`;
const Divs = styled.div``;
const Div1 = styled.div``;
const Div2 = styled.div``;
Above is where i want to reuse the component but they just stack up on each other
Below is the component i want to reuse
import React, { useState } from "react";
import "./Range.css";
import styled from "styled-components";
import ReactSlider from "react-slider";
function Range(props) {
const [currentValue, setCurrentValue] = useState(0);
return (
<div className="range">
<ReactSlider
className="customSlider"
trackClassName="customSlider-track"
thumbClassName="customSlider-thumb"
marks={1}
min={0}
max={10}
defaultValue={0}
value={currentValue}
onChange={(value) => setCurrentValue(value)}
/>
<h4>{props.title}</h4>
<h1 className="range-value">{currentValue}/10</h1>
</div>
);
}
export default Range;
What's inside your Range.css?
If the position is:
position: absolute;
Then your components will always stack on top of each other because they all have the same style.
You might need to set the position to:
position: relative;
So that the components will position themselves relative to each other.
I am new to React and did not find any solution to this simple problem.
I want to revert LangText colors when the toggle button is clicked - initially ENG is white and EST is black and every time input is clicked the colors invert.
I have separate files for returning and styling components.
I tried to change the color of a variable (located on top of the style-components file) inside the styled component tag, so with CSS - inside Input pseudo-class &:checked + span. Looked surreal and didn't work in any way.
I would be very thankful for an example of how to change two colors at the same, time in this case. There are always too few examples with components, usually, CSS is used separately, but for me this method is more readable and logical.
import React from 'react'
import { Input, InputWrapper, Slider, ToggleContainer, LangText} from './LangugageToggleElements';
const LanguageToggle = ({onChange}) => {
return(
<ToggleContainer>
<InputWrapper>
<Input type="checkbox" onChange={onChange}/>
<Slider>
<LangText>ENG</LangText>
<LangText>EST</LangText>
</Slider>
</InputWrapper>
</ToggleContainer>
)} ;
export default LanguageToggle
import styled from "styled-components";
let toggleBackground = "#000";
let textColor = "#fff";
export const ToggleContainer = styled.div`
position: absolute;
top: 10px;
right: 20px;
`
export const InputWrapper = styled.label`
position: relative;
display: flex;
justify-content: center;
text-align: center;
`
export const Input = styled.input`
position: absolute;
left: -9999px;
top: -9999px;
&:checked + span {
&:before {
left: 52px;
}
}
`
export const Slider = styled.span`
display: flex;
justify-content: center;
text-align: center;
cursor: pointer;
width: 105px;
border-radius: 100px;
position: relative;
transition: background-color 0.2s;
color: ${textColor};
&:before {
content: "";
position: absolute;
top: 15px;
left: 2px;
width: 50px;
height: 20px;
border-radius: 45px;
transition: 0.2s;
background: ${toggleBackground};
box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
}
`;
export const LangText = styled.p`
padding-right: 5px;
padding-left: 5px;
z-index: 1;
letter-spacing: 3px;
`;
I think you can simply use a useState hook to maintain checkbox and the use it for your LangText.
<ToggleContainer>
<InputWrapper>
<Input type="checkbox" onChange={()=>{
onChange();
//use state hook to maitain the checkbox value
}}/>
<Slider>
<LangText className={isChecboxValue === x ? color : invert }>ENG</LangText>
<LangText className={isChecboxValue === y ? invert: color}>EST</LangText>
</Slider>
</InputWrapper>
</ToggleContainer>
I use scss and styled-components together. Recently I don't know why I started to see a race situation over which styles get applied on the final render. Sometimes, usually, when the app is loaded for the first/second time, styles from scss gets applied and when I do a couple of hard refreshes my custom styles written with styled-components get applied. Do you have any idea why is this happening? I don't want to put it! important everywhere to fix it. I would like to understand it.
The below screenshot shows that _sidebar.scss overrode .sidebar styles I wrote.
after some hard refreshes:
after some refreshes, it is another way around:
Here is a component
/* eslint-disable jsx-a11y/anchor-is-valid */
import React from 'react';
import SidebarLinks from './SidebarLinks';
import FormSelectPrinter from "../printer/FormSelectPrinter"
import sidebarData from "../data/";
import {ModalConsumer} from "../components/ModalContext";
import Modal from "../components/Modal";
import { createGlobalStyle } from "styled-components";
const GlobalSidebarStyle = createGlobalStyle`
.sidebar {
background-color: #303b4a;
padding-left: 0;
padding-right: 0;
padding-bottom:40px;
width: 240px;
}
.user__info {
background: #607D8B;
}
.user__info:hover {
background: #607D8B;
}
.user__name {
color: #fff;
}
.user__email {
color: #303b4a;
}
.dropdown-user-menu {
background: #607D8B;
position: relative;
width: 100%;
float: none;
}
.dropdown-select-language {
background: rgba(96, 125, 139, 0.6);
box-shadow: 0 4px 20px rgba(0,0,0,0.9);
right: -26px;
top: 53px;
user-select: none;
}
.dropdown-user-item:hover, .dropdown-user-item:focus {
color: black !important;
}
.dropdown-user-item {
color: white !important;
}
.navigation {
li {
a {
color: #adb5bd;
padding-left: 15px;
&.active {
color: white !important;
}
}
}
}
.navigation li:not(.navigation__active):not(.navigation__sub--active) a:hover {
background-color: rgba(0, 0, 0, 0.19);
color: white;
}
.id-green {
background-color: #73983F;
}
.language-text-color {
color: white !important;
}
.profile_image_style {
border-radius: 100%;
width: 80px;
height: 80px;
}
`
function Sidebar(props) {
const ModalSelectPrinter = ({onClose, ...otherProps}) => {
return (
<Modal>
<FormSelectPrinter onClose={onClose} md={12}></FormSelectPrinter>
</Modal>
)
};
return (
<>
<GlobalSidebarStyle />
<aside className={`sidebar ${props.sidebarToggled? 'toggled' : ''}`}>
<div className="scrollbar-inner">
<div style={{margin: '50px 0 30px 0'}} onClick={() => props.toggleUserInfo()}>
<div className={`user__info ${props.userInfoShown? 'show' : ''}`}>
<div style={{width: '100%', textAlign: 'center'}}>
<div className="user__name">{user.person === null ? user.name : user.person.full_name}</div>
<div className="user__email">{user.email}</div>
</div>
</div>
<div
className={`dropdown-menu dropdown-user-menu ${props.userInfoShown? 'show' : ''}`}>
<ModalConsumer>
{({showModal}) => (
<a className="dropdown-item dropdown-user-item" onClick = {()=>showModal(ModalSelectPrinter, {})}>Select</a>
)}
</ModalConsumer>
<a className="dropdown-item dropdown-user-item" onClick={() => props.logout()}>Log out</a>
</div>
</div>
<SidebarLinks sidebarData={sidebarData} toggleSidebar={props.toggleSidebar}></SidebarLinks>
</div>
</aside>
</>
)
}
export default Sidebar;
picture here is the design can we able to implement color picker like this without any packages in react
is it possible to customize a color picker like the above image with react(without any package)? I tried a lot, but cannot able to find the proper solution. if anyone can help thanks in advance.
click this image link https://i.stack.imgur.com/1RFki.png
you can use inbuilt developer tools in a browser
You can use html tag of type 'color' as shown here.
If that does not work for you, you are looking at writing the color picker logic yourself.
<div>
<input type="color" id="head" name="head"
value="#e66465">
<label for="head">HTML 'color' input</label>
</div>
Here is the solution for my question also you can run this solution on code sandbox.
thanks, everyone :)
import React, { useState } from "react";
import styled from "styled-components";
import "./styles.css";
const Container = styled.span`
display: inline-flex;
align-items: center;
width: 150px;
max-width: 150px;
padding: 4px 12px;
border: 1px solid #bfc9d9;
border-radius: 4px;
input[type="color"] {
margin-right: 8px;
-webkit-appearance: none;
border: none;
width: auto;
height: auto;
cursor: pointer;
background: none;
&::-webkit-color-swatch-wrapper {
padding: 0;
width: 30px;
height: 30px;
}
&::-webkit-color-swatch {
border: 1px solid #bfc9d9;
border-radius: 50px;
padding: 0;
}
}
input[type="text"] {
border: none;
width: 100%;
font-size: 14px;
}
`;
const ColorPicker = props => {
return (
<Container>
<input type="color" {...props} />
<input type="text" {...props} />
</Container>
);
};
export default function App() {
const [state, updateState] = useState("#FFFFFF");
const handleInput = e => {
updateState(e.target.value);
};
return (
<div className="App">
<ColorPicker onChange={handleInput} value={state} />
</div>
);
}