score:0
Accepted answer
the props
you have access to in the template string used when creating the mailinglistwrapper
component are the props given to mailinglistwrapper
when you use it.
you could instead give the p
tag a uppercase
classname
and just apply the styles to p
tags with the uppercase
class.
const mailinglistwrapper = styled.div`
display: flex;
& > p.uppercase {
text-transform: uppercase;
}
`;
function joinus() {
return (
<mailinglistwrapper>
<p classname="uppercase">join our mailing list!</p>
<p>never miss an update</p>
</mailinglistwrapper>
);
}
score:0
putting the final result here for posterity based on tholle's answer...
const mailinglistwrapper = styled.div`
display: flex;
& > p {
color: gold;
&.uppercase {
text-transform: uppercase;
}
}
`
Source: stackoverflow.com
Related Query
- Pass prop to nested element in styled component
- MUI styled cannot pass component prop to Typography in typescript
- pass background url as prop to styled component
- Alternative to nested ternary expressions in my React component to pass prop value condionally
- How do I pass a prop from a Parent styled component to its children's styled components no matter how deep
- Trying to pass 'active' class styles to a nested SVG that's passed as a prop to button element
- How to pass a prop to all styled component css properties at once?
- React: inline conditionally pass prop to component
- React - How to pass props to a component passed as prop
- How do I get an attribute of an element nested in a React component using Jest and/or Enzyme?
- Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(CharacterList)
- Test React component method is calling function pass as a prop
- using css modules in react how can I pass a className as a prop to a component
- How to pass optional elements to a component as a prop in reactjs
- How to pass props to a styled component in emotion? Using TypeScript
- Pass custom prop or data to Next JS Link component
- React Native pass function to child component as prop
- Is it possible to pass props to "css" element of styled components?
- TypeScript: Extend React component props for styled component element
- Pass DOM Element as a prop in React
- How to pass a React component as a prop
- How to pass custom attribute to a styled component in a functional component?
- How do I pass a Prop to a Navigation Screen Component - React Native
- React: Pass component as prop without using this.props.children
- Pass state to recursively nested component in React/Redux
- Pass click event to nested component - React | Material-UI
- Pass an inline SVG as React component prop
- How to pass props of React component to styled component
- Find element with Enzyme in nested React component
- How to pass nested styling to a component in React
More Query from same tag
- Next.js Firebase Hosting 404 error on all except index.html
- Redux Form can't edit user profile
- React event hierarchy issue
- How to deploy JS app that has code splitting, making sure past app versions don't break
- property of state not usable on onChange in react+ts?
- Access a reducer from a different reducer?
- How to expand and collapse only the first item in accordion using react hooks?
- Dynamic MenuItem from state materialUI
- React unsubscribe from RxJS subscription in useEffect
- How to send info from a reusable input to the other components in React
- Dynamically create an array of inputs in React
- Autocomplete Editor ( REACT, DRAFT-JS)
- How do I increase the font size of a different components element using reactjs
- Render react class component on route params change
- React JS Read props data only when I refresh the page
- react-slick carousel somehow adding link to every image
- How do I keep component state in React during Route changes?
- Customization of devloper portal to put api published time in overview of devprortal
- How to add a non editable tag to content in Quill editor
- How to add login authentication and session to ReactJS React Router and Redux with MongoDB + NodeJS Express?
- Error 500 Upload image to strapi with Axios
- To avoid the 'Access-Control-Allow-Origin' issue, how should CORS be set up on a MERN app that calls an API that is located somewhere else?
- Can't perform react state in React
- create-react-app crashing with error of not having permission
- I have buttons and a textbook in my React App, How do I make the click of the button trigger text input?
- Cannot read properties of null (reading 'user')
- .Net core and React uppy.io 110mb file upload exception "Unexpected end of request content."
- How to fetch POST in a class component using @auth0/auth0-react
- GeoJSON from react-leaflet doesn't render the layer over the map
- Insert auto-slash for date in mm/dd/yyyy format for "react-datepicker"