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.
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'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="/" />
is it possible to make selector for child component prop in styled components?
<Accordion>
<Checkbox checked='false' />
<Text>Text to be hidden when checked is false</Text>
</Accordion>
I would like to access the prop something like this:
const Accordion = styled.div`
& > ${Checkbox}[checked='false'] ~ ${Text} {
display: none;
}
`;
Is it possible and if so, how should I do it?
You are trying to use Attribute selectors, so you need to define valid attributes on Checkbox component like data-*.
If you trying to use component's property, you have to lift the state up (see Text with "State from Parent").
const Checkbox = styled.div``;
const Text = styled.div``;
const Accordion = styled.div`
& > ${Checkbox}[data-checked="true"] ~ ${Text} {
color: palevioletred;
font-weight: 600;
&:last-child {
color: ${prop => (prop.checked ? `blue` : `orange`)};
}
}
& > ${Text}[title="example"]{
border: 1px solid black;
}
`;
const App = () => {
return (
<Accordion checked>
<Checkbox data-checked="true" checked="true">
I'm Check box
</Checkbox>
<Text title="example">With attr gives border</Text>
<Text>Without attr</Text>
<Text>State from Parent</Text>
</Accordion>
);
};
I'm using PostCSS with React and wanted to add a regular class and modifier class based on my component's state. In short I'd like to perform a show/hide toggle based on the presence/absence of a search input query. Unfortunately it appears that using bracket notation is just rendering the class names in a way that they're unrecognizable.
className={ this.state.suggestionsAvailable ? styles['site-search__suggestions'] styles['site-search__suggestions--active'] : styles['site-search__suggestions'] }>
Has anyone encountered this with a workaround?
import React, { Component } from 'react';
import styles from './SiteSearch.css';
class SiteSearch extends Component {
constructor(props) {
super(props);
this.state = {
suggestions: [],
suggestionsAvailable: false
};
}
render() {
return(
<form>
...
<div className={ this.state.suggestionsAvailable ? styles['site-search__suggestions'] styles['site-search__suggestions--active'] : styles['site-search__suggestions'] }>
...
</div>
</form>
);
}
}
.site-search__suggestions {
display: none;
position: absolute;
margin-top: 5px;
border: 1px solid #e0e3e5;
height: 240px;
width: 100%;
border-radius: 6px;
background-color: rgba(255,255,255,0.9);
}
.site-search__suggestions--active {
display: block;
}
<div className={ this.state.suggestionsAvailable ? styles['site-search__suggestions'] + " " + styles['site-search__suggestions--active'] : styles['site-search__suggestions'] }>
Is what's needed for this to work, the strings have to be concatenated to show up properly.
#Carl Edwards also had a solution for ES2015 that uses a template literal:
${styles['site-search__suggestions']} ${styles['site-search__suggestions--active']}
You can use .join(' ').
To join more than one substring, you need to make array[ ].
<div className={ this.state.suggestionsAvailable ? [styles['site-search__suggestions'],styles['site-search__suggestions--active']].join(' ') : styles['site-search__suggestions'] }>
you can also use Object.assign to combine multiple objects into one new Object
Object.assign{{},styles['site-search__suggestions'],styles['site-search__suggestions--active'] }
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign