I have looked for dozens of examples on google and youtube but none of them seems to work. My problem is that whenever I try classic methods for conditional styling in styled-components it won't change the component's style as I wish it to change... Anybody can tell me what I am doing wrong?
Child component:
const Ripple = styled(ButtonBase)`
font-family: ${font.family};
font-size: ${(props) => (props.small ? '14px' : '16px')};
color: white !important;
&:focus {
border-radius: 6px;
}
`;
Parent:
<Button small label="Get in touch" href="/" />
It does nothing.... Pls help.
You seem to be calling the wrong component. You're calling <Button />
Try:
<Ripple small label="Get in touch" href="/" />
Related
I have a bunch of grids which I would like to form them a way as I intended to do. Here is a picture of how they look now:
What I would like to do is to move "CL1" and "Author" in parallel but after "commiter 1". And then followed by "CL2" and "CL3" in linear order like they are now. My code is as following:
import { React } from "react";
import styled from "styled-components";
function App() {
return (
<>
<Input placeholder="commiter 1" />
<Input placeholder="Author" size="2em" />
<div>
<Input placeholder="CL1" />
</div>
<Input placeholder="CL2" />
<Input placeholder="CL3" />
</>
);
}
export default App;
const Input = styled.input.attrs(props => ({
// we can define static props
type: "text",
size: props.size || "1em",
}))`
color: palevioletred;
font-size: 1em;
border: 2px solid palevioletred;
border-radius: 3px;
margin: ${props => props.size};
padding: ${props => props.size};
`;
I am just started with CSS styling, and trying with styled-component as of now. Any idea on which tutorial I should look up into, or suggestions to other CSS tool would be appreciated as well!
something like styled you should use when styles a dynamically, when you don't now size of some images or same problem. In casual situation you should use .css/scss file.
And check this https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I am using React with Styled Components while formatting code using Prettier. Let's have the following code:
const Component = Styled.div`
color: green;
${props => props.important && `
font-weight: bold;
`}
`
It's simple styled component with usage <Component /> or <Component important={true} />. However, when I format code using Prettier, the code changes to:
const Component = Styled.div`
color: green;
${props =>
props.important &&
`
font-weight: bold;
`}
`
Is there any way to set Prettier to not add newline after => and after && in this case? I searched in Prettier options, however I did not find anything.
If you can't find the option to do it here then it isn't possible.
By design - Prettier is not intended to provide a lot of configuration options.
I've tried everything. At least, for a while, I can't find any new possible solution for my problem. There is a possibility that I don't understand something, because I'm at the beginning of my adventure with React.js.
To the point:
I want to create a component-header with a background image. In the parent component, I put an image URL as a prop and try to use it in the child component as a background-image: URL(). And it, of course, doesn't work. Also, I've tried to set a colour, and it also doesn't work.
Here is my parent component:
import Hero from '../Hero';
import image from './cat.jpg'
function Main() {
return <div>
<Hero title="Only fluff photos" image={image} color="#f0f"/>
</div>
};
and here is my child component:
import styled from 'styled-components';
const StyledHeader = styled.header`
display: flex;
width: 100%;
height: 432px;
background-image: url(${(props) => props.image});
background-color: ${props => props.color ? props.color : "#ff0"};
`
function Hero(props) {
return <StyledHeader>
<h1>{props.title}</h1>
<img src={props.image} alt="test cat" />
</StyledHeader>
};
What I've tried:
Put the same URL into img tag as a src - it works
Import an img directly in child component and us {image} - it works
Use require() - it doesn't work
Use url(~{props.image}) - it doesn't work
Use different forms of props when styling my StyledHeader - it doesn't work
Put an image into a folder that has exactly the same path for both components - it doesn't work.
Of course, all of points from 3 to 6 doesn't work, because none of props works. But I've found that later.
styled-components gives an example of props usage:
background: ${props => props.primary ? "palevioletred" : "white"};
It doesn't help me :(
Thanks in advance for any help! I have no idea what I've done wrong.
It won't work because you have to give the Styled header the prop as followed
const StyledHeader = styled.header`
display: flex;
width: 100%;
height: 432px;
background-image: url(${(props) => props.image});
background-color: ${props => props.color ? props.color : "#ff0"};
`
function Hero(props) {
return <StyledHeader image={props.image} color={"value"} {...otherProps}>
<h1>{props.title}</h1>
<img src={props.image} alt="test cat" />
</StyledHeader>
};
I'm using Gatsby.js to build a site. It works very similarly to React.js.
I have a side menu. I would like the icons on this menu to be highlighted when the user is on the respective page. Gatsby has an 'activeStyle' option but this is not working for me. The icon still remains white when I am on the respective page.
My gatsby code using activeStyle looks like this:
<div class="sidebar_button">
<Link to="/about">
<i>
<FiUser size={22} activeStyle={{ color: "blue" }} />
</i>
<p>ABOUT</p>
</Link>
</div>
'FiUser' is the name of the icon I am using (with react-icons).
If I change 'activeStyle' to just 'style', the icon does change to blue - just not with 'activeStyle'.
I was wondering if anyone could point me in the right direction as to whats going wrong?
activeStyle and activeClassName are supposed to be used on the Link component itself, not on it's children.
<div class="sidebar_button">
<Link to="/about" activeClassName="active-link">
<i>
<FiUser size={22} className="user-icon" />
</i>
<p>ABOUT</p>
</Link>
</div>
The i and FiUser should not have any attributes that would override this style.
On styling:
.user-link {
color: blue;
}
.active .user-link {
color: white;
}
Docs
Using Boy With Silver Wings answer with some modifications, I found what worked for me was:
<div class="sidebar_button">
<Link to="/" activeClassName="user-link">
<i>
<TiHomeOutline size={22} className="user-icon" />
</i>
<p className="user-text">HOME</p>
</Link>
</div>
And for my CSS:
.user-icon {
color: #d8d8d8;
}
.user-text {
color: #d8d8d8;
}
.user-link .user-icon {
color: #97b27b;
}
.user-link .user-text {
color: #97b27b;
}
This generates exactly what I was looking for. I hope this can help someone else.
E.g when on the about/ 'silhouette' page it looks like this:
So when I'm using an Icon in Ant Design it is always 14 * 14 px.
Is there a way to set the size maually?
Things like
<Icon width={"20px"} type="setting" />
or
<Icon style={{width: '20em'}} type="setting" />
do not work
It should be
<Icon type="message" style={{ fontSize: '16px', color: '#08c' }} theme="outlined" />
https://codepen.io/anon/pen/wNgrWX
Can change the size of the icon using fontSize style property.
eg: use of style={{ fontSize: '150%'}}
<PlayCircleFilled style={{ fontSize: '150%'}} />
In the new antd Icon version, you can increase the size of the icon like this:
import { MessageTwoTone } from "#ant-design/icons";
And call it as:
<div style={{ fontSize: "30px" }}>
<MessageTwoTone />
</div>
I tried using it as an attribute of <MessageTwoTone> but attribute no longer works like in the old version mentioned in the answers above.
Edited:-
I was told later that the above will only work while the Icon inherits its font-size from its parent. So we should rather add the style attribute directly to the Icon
<MessageTwoTone style={{ fontSize: "30px" }}/>
Not sure if its just for me, but as of today the accepted answer does not work, I made it work by putting a className inside the Icon Component, and targeting the svg of that class. here's an example
component.js
import { CheckCircleTwoTone } from '#ant-design/icons';
<CheckCircleTwoTone
twoToneColor="#52c41a"
className="reg_icon"
/>
component.scss
.reg_icon {
svg {
font-size: 120px !important;
}
}
Use <Icon style={{ fontSize: '30px'}} type="check-circle" />
Here is a working codepen:
https://codesandbox.io/s/x7r7k7j6xw
If using the icon inside the button like this:
<Button type="text" icon={<GithubOutlined />} />
You can add these classes/styles and it will solve the issue for you (it solved it for me)
<Button type="text"
className={styles.button}
icon={<GithubOutlined className={styles.icon}/>}
/>
.button {
// The wanted size...
font-size: 2.5em;
// Without it, changing the font size will cause problems.
width: fit-content;
height: fit-content;
.icon {
font-size: inherit;
}
}
CodePen Demo
Best way to do it with javascript
Icon.setTwoToneColor("#000");