score:2
you are using the "begreen" condition in the container. but you pass "begreen" to h2. you should pass "begreen" to the component where you use it, that is, to the container.
in the code below, i pass begreen to the container.
const container = styled.section`
display: flex;
alignitems: center;
& > h2 {
color: ${props=> props.begreen ? "green" : 'black'};
}
`
function b({classname}) {
const isshow = useselector(selectisshow)
console.log(isshow)
const dispatch = usedispatch()
const handlelogout = () => {
dispatch(setisshow(false))
}
return (
<container classname={classname} begreen={isshow}>
{isshow && <h2 classname={`${classname}-title`}>hi huang, welcome!</h2>}
<signoutbtn onclick={handlelogout}>logout</signoutbtn>
</container>
)
}
Source: stackoverflow.com
Related Query
- styled component - nested conditional styling
- Trying to apply :focus styling to a nested SVG inside of styled component
- React and Styled Component - conditional styling based on current iteration
- Typescript React - Styled component conditional styling using prop not working
- Styling Material-UI Drawer component with Styled Components
- How to pass nested styling to a component in React
- Typescript with Styled component conditional css for custom props
- How to style a nested functional component using styled components
- Conditional styling using Styled Components
- Conditional styling with Styled Components
- Pass prop to nested element in styled component
- React Styled Component SVG styling isn't displaying properly?
- Styling a separate functional component with Styled Components
- Conditional Rendering in Styled Component based on Parents' Props
- React jsx conditional styling of <input/> component
- Is there a way to target a nested JSS styled component within another JSS styled component? [JSS-nested/Styled-JSS/Material UI (React)]
- Styling <Link> component from React-router-dom, doesnt work with styled components
- Styled Component only applying style to nested selector
- React + Styled Components: How to write a dumb component with nested tags?
- Styling nested components using styled components
- conditional className convert to styled component
- Styling react component in styled components
- Styled Components Conditional Styling with href value
- Trying to build React Component that can iterate over a nested data structure and produce styled HTML elements based on type
- how to conditional render a styled component in react?
- Correct way to handle conditional styling in React
- Target another styled component on hover
- React showing 0 instead of nothing with short-circuit (&&) conditional component
- conditional rendering in styled components
- How to extend styled component without passing props to underlying DOM element?
More Query from same tag
- React lifecycle method on createElement()
- How do I store JWT and send them with every request using react
- React.JS, TypeError: this.state.movies.map is not a function Issue
- useMemo not running when "data" from Apollo useQuery hook returns a new value for "data" on which useMemo is dependent
- Redux action returns undefined
- reactjs highcharts reference for reload
- Calling render vs painting the DOM?
- NextJS react hook - Pass async state to child components
- Maximum update depth exceeded when using shortid and react-final-form
- Material UI v1 with Redux - How to export
- Module not found: Error: Cannot resolve module 'react-addons-test-utils'
- React functional component has not re-render with same state or props
- pass exclamation mark as prop value in react component
- How to add elements dynamically using redux
- How to call function after URLSearchParam?
- React keeps throwing index error even though I have indexes defined
- Why usePrevious returns undefined on first render - react hooks?
- How to go back to previous page using back button/Link click using react-router-dom
- Grab row data onclick of a field in material-table
- React Native: How to get <TextInput/> to start from right to left?
- React Modal only close when I click background or close icon?
- React JS: Having issue with CREATE_REACT_APP when using npx command in VS Code
- material-ui menu not close when dialog open
- How can I delete an item from my todolist
- how to add caption to images in draft js?
- How to fetch API data as this. props?
- How to change Material UI stepper background color if there is an error in a step
- What are these custom attributes in aliexpress' span attributes? "ae_some_name=" etc
- Redux on functional components in Reactjs (web)
- Component structure: Swap one component based on react-router path