How do I do a Styled Button in an Alert Action in React MUI? Its not registering or seeing my css changes. Do I need to pass parameter certain way?
React:
const StyledButton = styled(Button)`
font-family: 'Source Sans Pro';
padding-bottom: 1px;
color: '#663C00';
background-color: 'transparent';
text-decoration: 'none';
&& {
font-family: 'Source Sans Pro';
padding-bottom: '1px';
color: '#663C00';
background-color: 'transparent';
text-decoration: 'none';
}
`;
HTML:
<Alert
severity="warning"
action={
<StyledButton href={getChargeURL()}>
Its not registering or seeing my css
tl;dr - syntax is invalid
You are specifying the css as CSSProperties used for inline styling, directly in JSX (CSSProperties is a dictionary object with camelCased keys and strings as value).
You should remove the quotes (') from styles, replace commas (,) with semicolons (;) and do not camelCase it, just like you would do with a standard css syntax.
const StyledButton = styled(Button)`
font-family: 'Source Sans Pro';
padding-bottom: 1px;
color: #663C00;
...and so on
`;
Related
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.
Hi everyone im in trouble with active Link, i use Styled Component.
I want my link to be Red when i'm on active link but nothing work.
I tried ActiveCLassName but this not work too.
can someone help me?
thanks a lot
const NavLink = styled(Link)`
display: flex;
justify-content: center;
align-items: center;
height: 100%;
padding: 0 10px;
list-style-type: none;
text-decoration: none;
color: black;
background-color: yellow;
border: 0.1px solid lightgrey;
`;
export default function Nav() {
return (
<NavWrapper>
<UlNav>
<LiNav>
<NavLink to="/Burgers">Burgers</NavLink>
</LiNav>
<LiNav>
<NavLink to="/Burgers">Pizza</NavLink>
</LiNav>
<LiNav>
<NavLink to="/Burgers">Drinks</NavLink>
</LiNav>
</UlNav>
</NavWrapper>
)};
Issues
The issue I see is you are styling the Link component instead of the NavLink component. The Link component doesn't take any additional props for handling active links.
Solution
The NavLink component uses a .active class by default, so of you don't need any special classname you should use this class.
Example:
import { NavLink as BaseNavLink } from "react-router-dom";
const NavLink = styled(BaseNavLink)`
display: flex;
justify-content: center;
align-items: center;
height: 100%;
padding: 0 10px;
list-style-type: none;
text-decoration: none;
color: black;
background-color: yellow;
border: 0.1px solid lightgrey;
&.active {
.... your active CSS rules here
}
`;
Tested and works in both RRDv5 and RRDv6.
RRDv5
RRDv6
"/drinks"
"/burgers"
Your code is missing some stuff, like I am not seeing anywhere you are setting color: red like you want. Basically, the active link will have the class active applied, so either using a normal stylesheet or inside your styled(Link, you have to write a rule for that class that does what you want.
Like it says here Use 'active' state from React Router in Styled Components. You may have to use the &.active selector to apply the styles.
activeClassName just changes what the class name is, which isn't what you want. By default it is active which is fine, you just have to write the CSS rule to match it. https://v5.reactrouter.com/web/api/NavLink/activeclassname-string
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've created the following styled-component for my gatsby project.
import React from "react"
import styled, { css } from 'styled-components'
const Button = styled.div`
background-color: #4E58F5;
width: 200px;
padding: 20px;
margin-right: 30px;
margin-top: 30px;
border-radius: 30px;
color: #FFFFFF;
transition: background-color 0.25s ease;
${props => props.primary && css`
background-color: #FFF;
color: red;
`}
`;
export default props => (
<Button>{props.buttonText}</Button>
)
I've not found the examples in the documentation to be clear or consistent enough to understand how I should be passing in the "primary" option to my components.
I'm trying to do the following, on my index.js page. The Button renders, but the primary word has no effect. What am I missing here?
<Button primary buttonText="Submit" />
The component you're exporting, does not recognize the primary property, and thus cannot pass it on to the Button element. You can fix this either by exporting the styled component itself, or by passing unrecognized props to the Button.
const Button = styled.div`
[...]
`;
export default Button;
OR
export default ({buttonText, ...props})=>(
<Button {...props}>{buttonText}</Button>
);
I'm using the same styles of components below on two different components in ReactJS. I wanted to know if it is possible to use a kind of mixin storing in another file and export them, then just call them on each ReactJS component? This would avoid repetition of code.
// Repeated styles
const TitleInflow = styled.h1`
text-align: center;
margin-top: 70px;
padding-bottom: 50px;
`;
const Table = styled.table`
margin: 0 auto;
margin-top: 100px;
`;
const ThTable = styled.th`
padding-right: 20px;
padding-left: 20px;
padding-bottom: 10px;
`;
Soluce 1 : You can create a common file like :
Common.js
const Common = `
// style you want.
padding: 5px;
color: red;
`
export default Common
and add it in your styled components like
Components.js
import Common from './common'
const TitleInflow = styled.h1`
${Common};
text-align: center;
margin-top: 70px;
padding-bottom: 50px;
`;
Soluce 2 : You can create a component and extend it :
here a component to extend :
const Component = styled.p`
color: red;
fontSize: 12px;
`
extend style like :
const NewComponent = styled(Component)`
// new style you want.
display: flex;
`
and if you want extend style with an another html tag you can do like it when you will use it :
<NewComponent as="h1"/>