score:1
i don't believe there's anything wrong with either approach. i've used what you're doing in your first example a lot in a large react app, and had no issue (yet).
that being said, your second example is perfectly valid. you don't even need the css
helper:
const test = styled.div`
${({ theme }) => `color: ${theme.white};`}
`;
in general, i use the css
helper to create abstracted/sharable css chunks:
const fontsize = css`
font-size: ${({ small, large, theme }) => {
if (small) return `${theme.small}rem`;
if (large) return `${theme.large}rem`;
return `${theme.normal}rem`;
}};
`;
const test = styled.div`
${({ theme }) => `color: ${theme.white};`}
${fontsize}
`;
and then:
<test small>hello world</test>
Source: stackoverflow.com
Related Query
- Themed styled components combine props and theme
- How to use custom props and theme with material-ui styled components API (Typescript)?
- Spreading Props TypeScript with React and Styled Components
- Avoid passing down props using Styled Components and Typescript
- 'Undefined' when attempting to pass MaterialUI theme props to styled components
- How can a Styled Components Theme be passed as Props to a Material UI component?
- Can't use props for styled components with emotion-js and typescript
- Styled components - How do I create a style that inherits a component and is able to send props to the parent?
- how do i pass props to styled components and map through array of image objects
- Can't figure out how change css using props in styled components and a useState hook
- How to combine ReactJs Router Link and material-ui components (like a button)?
- React memo components and re-render when passing function as props
- Flash Of Unstyled Text (FOUT) on reload using next.js and styled components
- Dynamic Theme in Styled Components
- Multiple Props Options for Styled Components
- styled components :hover with react-native and react-native-web
- Connecting child components to store vs connecting parent component to store and passing down props
- HOC's and Render Props With Functional Components in React 16
- Styled Components - Conditionally render an entire css block based on props
- How to use setFieldValue and pass the value as props between components
- how to change image src using props with styled component and react
- Import fonts to react project with webpack and styled components
- Can't import Google Fonts with Styled Components and Next.js
- Using Typescript with Styled Components and Material UI
- React Native: Passing props between components and componentWillMount() method
- Next.JS -- getInitialProps to pass props and state to child components via ContextProvider
- How to theme components with styled-components and Material-UI?
- Emotion Js and TypeScript problems when passing props to styled
- How to test styled components using Enzymes shallow and styled-component's ThemeProvider?
- how to pass props to styled components
More Query from same tag
- execute custom callbacks immediately after redux store update
- How to make owl-carousel responsive in React?
- How to render two components in single id element in react
- why <Redirect to='/vacations' /> Does not work
- React: How to call constant in method for database?
- State flow to render
- React js cannot read property 'id' of undefined for the property of API Call
- Sorting algorithm is activated only after refresh
- Is it possible to use async / await in React JS?
- JQuery toggleClass not working in React.js when i try to click on the element
- React Redux Login issue
- How to S3 + Cloudfrond + 2 SPA react apps in subfolders?
- Reactjs random colour picker - wow there must be an easier way?
- geolocation not updating state reactjs
- How to update hook state in a loop?
- Get nested object count of key value pair
- Object updation inside loop with immutable state
- How do I update State inside of a while loop in React
- Call a parent component function from a child component
- Gatsby error page resources not found. Not rendering React. After Gatsby Build
- `React/RCTBridgeModule.h` file not found
- eval an input string on button press in react
- Can we call constructor(props) with other names in react?
- React undefined map output
- Adding locale.js in moment React
- React Route does not work - Single page app
- Having git problem in React django project
- Using Redux Form, how do I only submit if any fields have changed?
- React-table hide various columns from button click
- Combining "normal" css and custom css properties inline on a react component