This is what most of my big production applications built with styled-components look like: src ├── App │ ├── Header │ │ ├── Logo.js │ │ ├── Title.js │ │ ├── Subtitle.js │ │ └── index.js │ └── Footer │ ├── List.js │ ├── ListItem.js │ ├── Wrapper.js │ └── index.js ├── shared │ ├── … Read more
Make sure you wrap the main react render code in the Router. For example, with react-dom you need to wrap the app in Browser-Router. If this is a Udacity project, this is typically the index.js file. import { BrowserRouter } from ‘react-router-dom’; ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter> , document.getElementById(‘root’));
You can extend the style keeping the original styles of the component from bootstrap. You will find more documentation on using third party libraries like react bootstrap with styled-components here. const StyledButton = styled(Button)` color: palevioletred; font-size: 1em; margin: 1em; padding: 0.25em 1em; border: 2px solid palevioletred; border-radius: 3px; `; Here is a sandbox for … Read more
You can solve this problem by adding an inline style export const SubmitButton = ({ onClick }) => { return ( <StyledButton variant=”raised” onClick={onClick} style={{ backgroundColor: ‘transparent’ }} > login </StyledButton> ) }
I believe what the documentation is saying is that you should avoid including your styles inside of the rendering component: DO THIS const StyledWrapper = styled.div` /* … */ ` const Wrapper = ({ message }) => { return <StyledWrapper>{message}</StyledWrapper> } INSTEAD OF THIS const Wrapper = ({ message }) => { // WARNING: THIS … Read more
The styled component will have to specify the prop to pass to the component like styled(“h2”)<IProps>. You can read more about the pattern from documentation css is not required here, it is added as a helper when you need to actually return CSS from a function. Check out conditional rendering. Taking these into account, the … Read more
This warning was fixed for me by adding an .babelrc file in the project main folder, with the following content: { “presets”: [“next/babel”], “plugins”: [[“styled-components”, { “ssr”: true }]] } See following link for an example: https://github.com/nblthree/nextjs-with-material-ui-and-styled-components/blob/master/.babelrc
You can, of course, maintain a separate CSS file that you include in your HTML via a <link> tag. For v4: Use createGlobalStyle from Styled-components. import { createGlobalStyle } from ‘styled-components’ const GlobalStyle = createGlobalStyle` body { color: ${props => (props.whiteColor ? ‘white’ : ‘black’)}; } ` <React.Fragment> <GlobalStyle whiteColor /> <Navigation /> {/* example … Read more
You can either share actual CSS strings or share styled-components components: Share CSS strings: import {css} from ‘styled-components’ const sharedStyle = css` color: green ` // then later const ComponentOne = styled.div` ${sharedStyle} /* some non-shared styles */ ` const ComponentTwo = styled.div` ${sharedStyle} /* some non-shared styles */ ` Share actual styled-components: const Shared … Read more
Pseudo-selectors in styled-components work just like they do in CSS. (or rather, Sass) Whatever isn’t working is likely a problem in your specific code, but that’s hard to debug without seeing the actual code! Here is an example of how to use a simple :after: const UnicornAfter = styled.div` &:after { content: ” 🦄”; } … Read more