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/
Related
I have a react component which uses inline styles and allows additional override styles to be passed as props.
function Input(props) {
return (
<input
style={{
borderRadius: 10,
border: '2px solid white',
...props.style,
}}
/>
);
}
In one specific use-case of the component, I want to remove the bottom border and get rid of the border radius on the two bottom corners of the component when some condition is met:
<Input
style={!condition ? {} : {
borderBottom: 0,
borderBottomRightRadius: 0,
borderBottomLeftRadius: 0,
}}
/>
This works as expected both on initial render, and once the condition is updated to true, however, once the condition is reverted back to false, the bottom border radius stays 0 rather than reverting back to the 10px specified by the borderRadius.
What seems to be happening, is once the bottom border radii are set to 0, instead of keeping borderRadius and overriding it with the more specific properties I set in the conditional style, react is instead replacing borderRadius with borderTopLeftRadius and borderTopRightRadius (i.e. the ones that weren't set in the conditional style).
After condition is toggled back to false this persists, rather than borderRadius being set on the element again even though the conditional style is now empty.
Is there any way around this other than having to reset the initial values in the falsy branch of the condition? I don't want the initial values of the Input style to need to be known outside of the Input function.
Thanks
Instead of passing the style to the child component, you can pass a condition and change the style depending on its value, like this:
function Input({ condition }) {
return (
<input
style={{
background: "red",
borderRadius: `${condition ? "10px" : "10px 10px 0 0px"}`,
border: "2px solid white",
borderBottom: `${condition ? "0" : "2"}px solid white`,
}}
/>
);
}
function App() {
const [condition, setCondition] = useState(false);
return (
<div>
<button onClick={() => setCondition(prev => !prev)}>Change</button>
<Input condition={condition} />
</div>
);
}
Edit:
The anothere way I could think of is by using custom libraly styled-compenents where you could do somethin like this:
import React, { useState } from "react";
import styled, { css } from "styled-components";
const CustomInput = styled.input`
background: red;
border-radius: 10px;
border: 2px solid white;
${(props) => props.additionalStyles}
`;
function Input({ additionalStyles }) {
return <CustomInput additionalStyles={additionalStyles} />;
}
function App() {
const [condition, setCondition] = useState(false);
return (
<div>
<button onClick={() => setCondition((prev) => !prev)}>Change</button>
<Input
additionalStyles={
!condition ? ""
: css`
border-bottom: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
`
}
/>
</div>
);
}
Here you can find more about css function from styled-components: Link
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 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="/" />
I am writing a React application with styled components, creating a library of reusable components for my application, but I encounter the problem of inheritance between sister components when trying to give a property to a label that is next to my input when the input is required, but it does not work. I have tried with:
// Form.js
import { StyledLabel, StyledInput } from './styles.js'
<StyledLabel>Mi Label 1</StyledLabel>
<StyledInput required/>
// ./styles.js
import styled from 'styled-components'
export const StyledInput = styled.input`
border: 1px #dddd solid;
`
export const StyledLabel = styled.label`
font-size: 10px;
${StyledInput}['required'] + & {
&::after {
content: '*'
}
}
`
The result only returns the form without the *
Does anyone know how I can detect from Styled Components when an input has the required HTML attribute, and show the *
Pseudo-selectors in styled-components work just like they do in CSS. (or rather, Sass).
So you can do what you want this way:
const Wrapper = styled.div`
label {
&:after {
content: "${p => p.required && "*"}";
color: red;
}
}`;
const Form = () => {
return (
<Wrapper required>
<label>Mi Label 1</label>
<input />
</Wrapper>
);
};
But if you want don't want to pass props of the input element to its parent you can
do it this way:
const Wrapper = styled.div`
display: flex;
flex-direction: row-reverse;
align-items: center;
`;
const Example = styled.input`
+ label {
&:after {
content: "${p => p.required && "*"}";
color: red;
}
}
`;
const Form = () => {
return (
<Wrapper required>
<Example />
<label>My Label 1</label>
</Wrapper>
);
};
more info in resources:
Before and After pseudo classes used with styled-components
https://github.com/styled-components/styled-components/issues/388
https://github.com/styled-components/styled-components/issues/74