I need to be able to use #emotion/styled CSS-in-JS library so I can pass props to the background-color and color properties of my Button component. The background-color and color of the buttons are supposed to change with the rest of the app.
The commented out section that starts the JS section:
import EmotionStyled from "https://cdn.skypack.dev/#emotion/styled#11.10.5";
import styled from "https://cdn.skypack.dev/#emotion/styled#11.10.5"
function Button(props) {
const Button = styled.button`
margin-top: 2rem;
background-color: ${props.colorChange};
color: white;
border: none;
height: 2.5rem;
border-radius: 4px;
padding: 0 1rem;
font-size: 1rem;
&:nth-of-type(1) {
margin-right: 0.5rem;
}
&:hover {
background-color: ${props.colorChange};
opacity: 0.9;
}
`
return (
<div className='buttons'>
<div className='left'>
<Button><a href='https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=%22Everything%20has%20beauty%2C%20but%20not%20everyone%20can%20see.%22%20Confucius' id='tweet-quote'
target='_blank'
rel='noreferrer'><i className="fa-brands fa-twitter"></i></a></Button>
<Button><a href='https://www.tumblr.com/login?redirect_to=https%3A%2F%2Fwww.tumblr.com%2Fwidgets%2Fshare%2Ftool%3Fposttype%3Dquote%26tags%3Dquotes%252Cfreecodecamp%26caption%3DConfucius%26content%3DEverything%2Bhas%2Bbeauty%252C%2Bbut%2Bnot%2Beveryone%2Bcan%2Bsee.%26canonicalUrl%3Dhttps%253A%252F%252Fwww.tumblr.com%252Fbuttons%26shareSource%3Dtumblr_share_button' id='tumblr-quote'
target='_blank'
rel='noreferrer'><i className="fa-brands fa-tumblr"></i></a></Button>
</div>
<Button id='new-quote'
onClick={props.handleChange}
>New quote</Button>
</div>
)
}
is supposed to replace the Button component I have in place at the moment. Whenever I use this emotion-styled Button component, everything goes blank. Please help!
Here is a link to the codepen project: https://codepen.io/lawlessIndi/pen/gOKjNMG.
Related
I wanted to create Radio Input Buttons styled Cards.
I am using react js and ant design.
Tried to create my own native component using good old input type="radio".
Connecting them to antd forms wasen't smooth sailing, then I had another idea.
Using antd react Radio component and just passing a card component. That's the working result!
Usage.tsx
// Other Code
<Radio.Group onChange={onChange} value={value} className="cards-container">
<Radio value={FOCUS_LEVEL.Regular} className="radio-input-card-container">
<InputCard
title="First Card"
checked={value === CONSTANT1}
imgPath="../../assets/icon1.svg"
points={["This is a point explain why this card is the best!", "Wow this is also a great point"]} />
</Radio>
<Radio value={FOCUS_LEVEL.DeepFocus} className="radio-input-card-container">
<InputCard
title="Second Card"
checked={value === CONSTANT2}
imgPath="../../assets/icon2.svg"
points={["This point explains why this card is way better", "The other card as shitty points!"]} />
</Radio>
</Radio.Group>
// Other Code
Usage.scss
.cards-container {
display: flex;
justify-content: space-between;
margin-left: 20px;
}
InputCard.tsx
import React from "react"
import Title from "antd/lib/typography/Title";
import "./InputCard.scss"
export function InputCard({ title, checked, imgPath, points }): JSX.Element {
return (
<div className={checked ? "card checked" : "card"}>
<div className="header-container">
<Title className="card-title">{title}</Title>
<img src={imgPath} alt="regular focus"></img>
</div>
<ul>
{points.map((point) =>
<li key={point.toString()}>{point}</li>
)}
</ul>
</div >
);
}
InputCard.scss
.card {
height: 420px !important;
width: 360px !important;
position: relative !important;
left: -45px; // A work around. Placing the card under the native radio button
-webkit-appearance: none;
appearance: none;
border: 2px solid rgba(2,28,53,0.08);
border-radius: 14px;
box-shadow: 7px 7px 15px rgba(2,28,53,0.08);
cursor: pointer;
outline: none;
.header-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
ul {
padding: 0em 1em 0em 2.5em !important;
}
img {
margin: 0.5em 0em 1em 0em;
}
}
.card-title {
font-size: 20px !important;
margin-top: 16px !important;
}
.checked {
transition: border 0.5s ease;
border: 2px solid rgba(255,0,0,0.6);
}
The antd component creates a radio input circle right before the card childe. Moving the card to the left (left: -45px) so the card will include the radio circle is a workaround. I don't want to change too much in the parent component for me to use this InputCard component, and this is my try to do it within the component.
I have a ready button like this , These are the features I want every button to have.
If I send props for the icon, I don't want the icon to be created, if I don't, I don't want it to be created.
import Icon from 'components/icons/Icon';
import styled from 'styled-components';
const Button = styled.button`
border-radius: 8px;
color: white;
cursor: pointer;
outline: none;
border: none;
display: flex;
font-family: 'DM Sans', sans-serif;
font-weight: 700;
`;
const DefaultButton = ({ name, children }) => {
return (
<Button>
{name && <Icon name={name}></Icon>}
{children}
</Button>
);
};
export default DefaultButton;
I have a button component that I have customized like this.
I want it to inherit its properties from the default button.
But Primary's features do not appear on my button.
I wonder what should I fix, thanks friend
import styled from 'styled-components';
import { sizes } from 'constants/components/button';
import { colors } from 'theme';
import DefaultButton from './DefaultButton';
const PrimaryButton = styled(DefaultButton)`
padding: ${({ size }) => sizes[size]} 48px;
background-color: ${colors.primary.color};
font-size: 14px;
font-style: bold;
&:focus {
border: 1px solid #ffffff;
box-sizing: border-box;
box-shadow: 0px 0px 0px 3px rgba(24, 207, 152, 1);
}
&:hover {
background-color: ${colors.primary.pressed};
box-shadow: 0px 14px 24px rgba(23, 207, 151, 0.3);
color: white;
}
&:disabled {
background-color: ${colors.primary.disabled};
cursor: not-allowed;
pointer-events: none;
color: white;
}
`;
export default PrimaryButton;
This is how I use my component and I want it to be like this
<PrimaryButton size="md" name="test">
Sign in
</PrimaryButton>
If you want to extend/override the styles of another component, you need to pass down the className prop, as mentioned in the docs.
The styled method works perfectly on all of your own or any third-party component, as long as they attach the passed className prop to a DOM element.
const DefaultButton = ({ name, children, className }) => {
return (
<Button className={className}>
{name && <Icon name={name}></Icon>}
{children}
</Button>
);
};
I find #svrbst solution very effective. I extended it to add other dependencies as shown is the question and it works fine. Here is the forked codesandbox
I have a component for my button with its own css file, but I'm trying to figure out how to add a className directly to the component and change the CSS for mobile view. Right now, the Button.css file overrides everything and my new className added to the component doesn't even show up in the html.
Here is the Button.js file
import React from 'react';
import './Button.css'
const STYLES = [
'btn--primary',
'btn--outline'
]
const SIZES = [
'btn--medium',
'btn--large'
]
export const Button = ({
children,
type,
onClick,
buttonStyle,
buttonSize
}) => {
const checkButtonStyle = STYLES.includes(buttonStyle) ? buttonStyle : STYLES[0]
const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0]
return (
<button className={`btn ${checkButtonStyle} ${checkButtonSize}`} onClick={onClick} type={type}>
{children}
</button>
)
}
Here is the Button.css
:root {
--primary: #3acbf7;
}
.btn {
padding: 8px 20px;
border-radius: 4px;
outline: none;
border: none;
cursor: pointer;
}
.btn:hover {
background-color: transparent;
color: #fff;
padding: 8px 20px;
border-radius: 4px;
border: solid 2px var(--primary);
transition: all 0.3s ease-out;
}
.btn--primary {
background-color: var(--primary);
}
.btn--outline {
background-color: transparent;
color: #fff;
padding: 8px 20px;
border-radius: 4px;
border: solid 1px var(--primary);
transition: all 0.3s ease-out;
}
.btn--medium {
padding: 8px 20px;
border-radius: 4px;
font-size: 18px;
color: #fff;
}
.btn--large {
padding: 12px 26px;
border-radius: 4px;
font-size: 20px;
color: #fff;
}
And here is the main component where I'm trying to add a custom className to override the code above. Note this code is inside of a Navbar component.
import React, { Component } from 'react';
import { MenuItems } from "./MenuItems"
import { Button } from "../Button"
import './Navbar.css'
class Navbar extends Component {
render() {
return (
<nav className="NavbarItems">
<Button className="btn-mobile">Sign Up</Button>
</nav>
)
}
}
If I try to add .btn-mobile to my Navbar.css, none of the properties show up in the html. I tried to add an id and still didn't work. Not sure how to custom the button since it's a component with preset properties
The way that I generally accomplish this is to accept className as a prop and spread it into the default classes of the element, like so:
const Button = ({className='', text, ...rest}) => (
<button className={`my-button-class ${className}`} {...rest}>{text}</button>
)
Then you could use it like so:
<Button className="my-custom-class" text="press me" id="my-id" />
and it will render as
<button class="my-button-class my-custom-class" id="my-id">press me</button>
By defaulting the className prop to an empty string, it won't be added as the string of "undefined" if the implementation doesn't pass a className. Note that we also spread in any other props that were passed.
I want to design a dynamic nav tabs component. when the card is clicked relevant tab is shown, with the connection arrow and border-color green.
sample code or a suggestion would be much helpful
.
You can use accordion by bootstrap. Use css flexbox to horizontally align the tabs next to each other and bind a javascript method that changes css color properties (arrow, green color) on clicking.
Here is the link - https://getbootstrap.com/docs/4.0/components/collapse/
Here is how you can do :
.js :
import React, { Component } from "react";
import { render } from "react-dom";
import "./style.css";
const App = () => {
const selectBlock = (e) => {
e.target.classList.toggle('selected');
}
return (
<div className="block" onClick={(e) => {selectBlock(e)}}>
<div>Here is the block</div>
<div className="arrow">
<FakeArrow />
</div>
</div>
);
};
const FakeArrow = () => {
return (
<div>
<span className="arrow-down-border" />
<span className="arrow-down" />
</div>
);
};
render(<App />, document.getElementById("root"));
.css :
.block {
position: relative;
width: 150px;
height: 50px;
text-align: center;
border: 2px solid black;
}
.arrow {
display: none;
}
.block.selected {
border: 2px solid #99d32c;
}
.block.selected .arrow {
display: block;
}
/* You need to fake the arrow border with another arrow behind */
.arrow-down-border {
position: absolute;
bottom: -20px;
left: 55px; /* 150px (main block) / 2 -20px (size of the triangle)*/
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #99d32c;
}
.arrow-down{
position: absolute;
bottom: -17px;
left: 58px; /* 150px (main block) / 2 -17px (size of the triangle)*/
width: 0;
height: 0;
border-left: 17px solid transparent;
border-right: 17px solid transparent;
border-top: 17px solid #ffffff;
}
Here is the repro on Stackblitz.
Of course this is just an example, you have to set a color for the arrows so my advice would be to do it with constants or props. Same thing for the position and others functionality you can add to the FakeArrow component.
Now, it would be waaaayy easier to manage it with an image if you really need a border (this is the tricky part in your requirement), or a simple arrow without border.
You can take a look at this post, it's the same question actually, i used a slightly different way to do it with css, but the result seems to be the same.
I want to add a Floating Action Button (FAB) on my app. Where I want to adjust its width and height to reduce its size using css. Also the button does not show the edit icon inside the button as expected.
Below are the code that I tried,
Code Sandbox
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './profile/profile.css';
import ProfileInfo from './profile/profile';
ReactDOM.render(
<ProfileInfo />,
document.getElementById('root')
);
profile.js
import React from 'react';
import './profile.css';
import Fab from '#material-ui/core/Fab';
import Icon from '#material-ui/core/Icon';
class ProfileInfo extends React.Component{
render(){
return(
<div className='prof-main-container'>
<div className='prof-items-container'>
<div className='prof-pic-container'><img src="https://ik.imagekit.io/upgrad1/upgradlogo.png" className="prof-pic" alt="profile pic" /></div>
<div className='prof-info-data-container'>
<div className='user-name'>User Name</div>
<div className='posts-follows-container'>
{/* <span className='posts-follows-item-first'>Posts:6</span>
<span className='posts-follows-item'>Follows:4</span>
<span className='posts-follows-item'>Followed By:6</span> */}
<span>Posts:6</span>
<span className='posts-follows-item'>Follows:4</span>
<span>Followed By:6</span>
</div>
<div className='full-name-container'>
<div className='full-name'>UpGrad Education</div>
<div className='full-name-edit-btn'>
{/* <Button variant="fab" color="secondary" size='medium'>
Edit
</Button> */}
<Fab color="secondary" aria-label="Edit" className='edit-btn'>
<Icon>edit_icon</Icon>
</Fab>
</div>
</div>
</div>
</div>
</div>
)
}
}
export default ProfileInfo
profile.css
.prof-main-container {
display: flex;
background-color: #5995DA; /* Blue */
padding: 20px 0;
}
.prof-items-container {
border: 1px solid #fff;
width: 100%;
display: flex;
/* justify-content: space-around; */
padding: 0% 20%;
/* padding-left: 500px; */
}
.prof-info-data-container{
display: flex;
/* justify-content: space-between; */
flex-direction: column;
margin: 0px 40px;
}
.prof-pic-container{
padding: 15px 0px 0px 0px;
}
.prof-pic{
width: 50px;
height: 50px;
}
.posts-follows-item{
margin: 0px 60px;
}
.posts-follows-container{
font-size: 11px;
margin: 2px 0px;
}
.full-name-container{
display: flex;
flex-direction: row;
}
.full-name{
font-size: 12px;
margin: 10px 0px;
}
.user-name{
font-size: 12px;
font-weight: bold;
margin: 5px 0px;
}
.full-name-edit-btn{
margin: 5px 20px;
}
.edit-btn{
width: 20px;
height: 20px;
}
The expected edit icon is as below.
But actually it is rendering as below. Note that, no edit icon is displaying inside the button as expected instead it is showing "EC" inside the button.Please ignore the background color here.
Also, I should be able to adjust the width and height of the below edit button to reduce its size.But I am not able to do it using css. I tried adding a class named "edit-btn" inside profile.css but it does not work.
Did you try using classes prop instead of className on your Fab element.
According to the documentation you should use the former.
Refer this link for the same :
Material UI FAB props
I have updated my answer. Your .edit-btn class will work fine if you give it more specificity. Refer my code sandbox for the same.
Regarding your <Icon> can you help me understand what is edit_icon?
code sandbox
Do give it a try and see if it works. Also please share what you have tried so far.Thanks!