There is this property, aria-current in a NavLink, it is set is set to value page (aria-current="page" for the selected element).
Is there a way to access it in React? In order to change the styling for the other links which aren't selected.
Could this be done more easily with CSS?
.navLink:not([aria-current]) { color: red;}
See below, this is what I do with styled components with react router v6. But you can follow the same way of doing things with any other styling strategy.
const StyledNavLink = styled(NavLink)`
text-decoration: ${(props) => {
console.log(props.style);
return props.style ? (isActive) => (isActive ? "underline" : "none") : "none";
}};
&:hover {
text-decoration: underline;
}
&[aria-current] {
color: red;
}
`;
Or, as shown below, one can check for existence of the active class
const StyledNavLink = styled(NavLink)`
text-decoration: ${(props) => {
console.log(props);
return props.style ? (isActive) => (isActive ? "underline" : "none") : "none";
}};
&:hover {
text-decoration: underline;
}
&[class*="active"] {
color: red;
}
`;
Yup you can access it via a ref of the element. For example:
const navRef = useRef(null);
...
return <nav ref={navRef}>{navRef.current.ariaCurrent}</nav>
Just a heads up: Attributes that start with aria are only intended for accessibility purposes so I wouldn't rely on them for the styling of components.
Yes, you can access it using useRef, and do whatever you want.
Related
enter image description here
I try to change button color via applying styles.css to button component. Component button got className for switching from reducer. After done condition in reducer className in button component got its correct value, but color not switch.... any ideas why?
please see
"
button key={id} className ={props.optionStyle}
"
reduser.js
....
if (newOption.option === answer) {
return {
...state,
userAnswer: newOption.option,
answer: answer,
answerTrue: true,
currentSrc: currentSrcT,
questAudio: false,
optionStyle: "styles.correct"
};
......
component with button
import React from 'react';
import styles from './item.css';
const OptionItem = (props) => {
const { option, image, id} = props.optionAnswer ;
const { onChoiseOption} = props ;
const onButtonChose = (id) =>{
if(props.answerTrue) {
}
}
const onChoiseOptionComp = e => {
onChoiseOption(),
onButtonChose(id)
}
return (
<div>
<button key={id} className={props.optionStyle}
onClick={
onChoiseOptionComp
}
>
{option}
<p ><img src={image} alt="cartinka" className={styles.imageOption}/></p>
</button>
</div>
)
};
item.css
.imageOption {
width: 300px;
padding-bottom: 10px;
}
.optionChose {
background-color: blue;
}
.correct {
background-color: crimson;
}
.nonCorrect {
background-color: #2ddc66;
}
.....if I tried to change className manually - that work fine
I think you are trying to use CSS modules in runtime code, and this won't work because it gets resolved before the code is built/ran.
optionStyle: "correct" in reducer looks more reasonable.
Secondly, your reducer gives you a string value "styles.correct" that is not the same as the variable styles.correct. This is one way to fix it:
className={ props.optionStyle === "correct" ? styles.correct : styles.nonCorrect }
I need to create a React Component Library
For this i use React with Typescript and styled-components.
I got stuck when i try to reuse my Atoms in a Molecule...
I create my Button Atom Component like this:
interface IButtonProps {
text?: string
onClick?: React.MouseEventHandler<HTMLButtonElement>
}
const StyledButton = styled.button<IButtonProps>`
height: 70px;
width: 70px;
border: none;
border-radius: 5px;
background-color: #88BDBC;
color: #254E58;
font-family: Alata, sans-serif;
font-size: 35px;
transition: all 350ms;
&:hover {
background-color: #254E58;
color: #88BDBC;
}
&:active {
background-color: #112D32;
color: #88BDBC;
}
`;
const Button = ({
text = "",
onClick
}: IButtonProps): React.ReactElement => {
return (
<StyledButton onClick={onClick}>{text}</StyledButton>
);
};
This is only a really not perfect Example for my Atoms. I create all Atoms like this. I only define the Style inside the Atoms -> Colors, Borders, Margins and so on. Not the Styles outside -> For Example Padding then i think its depends much in which context this Button is used.
So I'm very encapsulated.
When i want to use the Button in the for example 'Controller' Molecule then i need to give that Button some Positions and maybe some Paddings etc.
But in my Parent Styled Component i doesn't now how to Point them correctly. Especially when i have some bigger mix of Components like here.
interface IControllerProps {
text1: string;
text2: string;
text3: string;
onClick?: React.MouseEventHandler<HTMLButtonElement>
}
const StyledController = styled.div<IControllerProps>`
/* ... */
`;
const Controller = ({
onClick
}: IControllerProps) => {
const [powerOn, setPowerOn] = React.useState(false);
const [bankType, setBankType] = React.useState(false);
const [volume, setVolume] = React.useState(50);
return (
<StyledController>
<Text text="Hello"/>
<Switch checked={powerOn} onChange={(e: React.ChangeEvent<HTMLInputElement>) => {setPowerOn(e.target.checked)}}/>
<Button onClick={() => false}/>
<Text text="Hello"/>
<RangeSlider value={volume} min={0} max={100} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setVolume(parseInt(e.target.value))} />
<Text text="Hello"/>
<Switch checked={bankType} onChange={(e: React.ChangeEvent<HTMLInputElement>) => {setBankType(e.target.checked)}}/>
<Button onClick={onClick}/>
<Button onClick={onClick}/>
</StyledController>
)
};
Do i need to work with Propertys to give that to the Button ... Point everything with pseudoclasses ... Define everything in the Button (But what is with flexibility to Context of the reusable Button) ...
What is the best practice for that?
You target the styles like so (I answer in javascript for less complexity):
// Button.react.js
export const StyledButton = styled.button`
background-color: #88bdbc;
`;
// Controller.react.js
import { StyledButton } from './Button.react.js';
const StyledController = styled.div`
${StyledButton} {
background-color: blue;
}
`;
Please check the related docs.
In additon of the Answer from Dennis Vash:
For my Example Button Component this means i need to change it like this:
interface IButtonProps {
text?: string
onClick?: React.MouseEventHandler<HTMLButtonElement>
className?: string
}
const UnstyledButton = ({
text = "",
onClick,
className
}: IButtonProps): React.ReactElement => {
return (
<button onClick={onClick} className={className}>{text}</button>
);
};
const Button = styled(UnstyledButton)<IButtonProps>`
height: 70px;
width: 70px;
border: none;
border-radius: 5px;
background-color: #88BDBC;
color: #254E58;
font-family: Alata, sans-serif;
font-size: 35px;
transition: all 350ms;
&:hover {
background-color: #254E58;
color: #88BDBC;
}
&:active {
background-color: #112D32;
color: #88BDBC;
}
`;
The Reason for that is: This only works in the Context of styled-components and not on Context of ReactElement.
Important Point from styled-component docs:
However, wrapping in a styled() factory makes it eligible for interpolation -- just make sure the wrapped component passes along className.
When u use the Button directly from Styled Component (like Dannis Vash mentioned) then u can refer to it directly.
I just read in the styled-components documentation that the following is wrong and it will affect render times. If that is the case, how can I refactor the code and use the required props to create a dynamic style?
Thank you in advance.
Tab component
import React from 'react'
import styled from 'styled-components'
const Tab = ({ onClick, isSelected, children }) => {
const TabWrapper = styled.li`
display: flex;
align-items: center;
justify-content: center;
padding: 100px;
margin: 1px;
font-size: 3em;
color: ${props => (isSelected ? `white` : `black`)};
background-color: ${props => (isSelected ? `black` : `#C4C4C4`)};
cursor: ${props => (isSelected ? 'default' : `pointer`)};
`
return <TabWrapper onClick={onClick}>{children}</TabWrapper>
}
export default Tab
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 IS VERY VERY BAD AND SLOW, DO NOT DO THIS!!!
const StyledWrapper = styled.div`
/* ... */
`
return <StyledWrapper>{message}</StyledWrapper>
}
Because what happens is when the component's Props changes, then the component will re-render and the style will regenerate. Therefore it makes sense to keep it separate.
So if you read further on to the Adapting based on props section, they explain this:
const Button = styled.button`
/* Adapt the colours based on primary prop */
background: ${props => props.primary ? "palevioletred" : "white"};
color: ${props => props.primary ? "white" : "palevioletred"};
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
// class X extends React.Component {
// ...
render(
<div>
<Button>Normal</Button>
<Button primary>Primary</Button>
</div>
);
// }
this works because when you use the Button component in class X, it will know the props of class X without you having to tell it anything.
For your scenario, I imagine the solution would be simply:
const TabWrapper = styled.li`
display: flex;
align-items: center;
justify-content: center;
padding: 100px;
margin: 1px;
font-size: 3em;
color: ${props => (props.isSelected ? `white` : `black`)};
background-color: ${props => (props.isSelected ? `black` : `#C4C4C4`)};
cursor: ${props => (props.isSelected ? 'default' : `pointer`)};
`;
const Tab = ({ onClick, isSelected, children }) => {
return <TabWrapper onClick={onClick}>{children}</TabWrapper>
}
const X = <Tab onClick={() => console.log('clicked')} isSelected>Some Children</Tab>
I haven't tested this at all, so please feel free to try it out and let me know if it works for you or whatever worked for you!
You can pass an argument with Typescript as follows:
<StyledPaper open={open} />
...
const StyledPaper = styled(Paper)<{ open: boolean }>`
top: ${p => (p.open ? 0 : 100)}%;
`;
Another way to do it would be
const StyledDiv = styled.div.attrs((props: {color: string}) => props)`
width: 100%;
height: 100%;
background-color: ${(props) => props.color};
`
//...
render() {
return (
<StyledDiv color="black">content...</StyledDiv>
);
}
This way you are type-safe in terms of the props you want to send into the styled component. (Good when coding in Typescript)
For a more simple example with functional components:
Suppose you have an arrow like polygon and you need 2 of them pointing in different directions. So you can pass the rotate value by props
<Arrow rotates='none'/>
<Arrow rotates='180deg'/>
Then in the Component Arrow you have to pass the props like normal component to the styled component but in the styled component you have to use it like props:
import React from 'react';
import styled from "#emotion/styled";
const ArrowStyled = styled.div`
background-color: rgba(255,255,255,0.9);
width: 24px;
height: 30px;
clip-path: polygon(56% 40%,40% 50%,55% 63%,55% 93%,0% 50%,56% 9%);
transform: rotate(${props => props.rotates});
`
const Arrow = ({rotates}) => {
return (
<ArrowStyled rotates={rotates}/>
);
}
export default Arrow;
If you're using Typescript create an interface inside your styles file!
Otherwise, you won't be able to access props in your CSS
import styled from 'styled-components'
interface StyledLiProps{
selected: boolean
}
export const TabWrapper = styled.li`
// styles ...
color: ${props => (selected ? `white` : `black`)};
background-color: ${props => (selected ? `black` : `#C4C4C4`)};
`
And don`t forget to declare the props you want to use in your CSS inside your JSX
interface TabProps{
text: string;
}
const Tab = ({ text }: TabProps) => {
//...
return <TabWrapper selected={isSelected} onClick={() => updateTab}>{text}</TabWrapper>
}
Consider styled components documentation gives example of using reacts context api [2] for different themes.
[1] https://www.styled-components.com/docs/advanced
[2] https://reactjs.org/docs/context.html
Exporting styled-component
Button
and passing scrollPosition as a prop in functional component
PassingPropsToSyledComponent
import styledComponents from "styled-components";
export const Button = styledComponents.div`
position: ${ props => props.scrollPosition ? 'relative' : 'static' };
`;
export const PassingPropsToSyledComponent = ()=> {
return(
<Button scrollPosition={scrollPosition}>
Your Text Here
</Button>
)
}
I want to access the CSS values I assigned to a styled component in a function. How would I do so?
For example:
const Hello = styled.p `
font-size: 10px;
`;
getFontSize = () => {
}
I want to log the font size of the component Hello in the function getFontSize(). I have tried using refs and InnerRefs but no luck.
You can use the innerRef prop on your component to get a reference to the DOM node, and then use window.getComputedStyle on the node to get the font-size.
Example
const Hello = styled.input`
padding: 0.5em;
margin: 0.5em;
color: palevioletred;
background: papayawhip;
border: none;
border-radius: 3px;
font-size: 10px;
`;
class Form extends React.Component {
ref = null;
componentDidMount() {
this.getFontSize();
}
getFontSize = () => {
console.log(
window.getComputedStyle(this.ref, null).getPropertyValue("font-size")
);
};
render() {
return <Hello innerRef={ref => (this.ref = ref)} />;
}
}
I've seen some burdensome solutions to this problem, using refs or event handlers in React. I'm wondering if there's a solution at all in styled-components.
The code below is clearly incorrect. I'm trying to figure out the easiest way to style my parent component, when my input child component has focus. Is this possible using styled-components?
What's the best way to go about this, specifically with styled-components in mind, even if it means relying on one of the React methods mentioned above?
const Parent = () => (
<ParentDiv>
<Input/>
</ParentDiv>
);
const ParentDiv = styled.div`
background: '#FFFFFF';
${Input}:focus & {
background: '#444444';
}
`;
const Input = styled.input`
color: #2760BC;
&:focus{
color: '#000000';
}
`;
Check out :focus-within! I think it's exactly what you're looking for.
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within
// update 2022:
You can use :focus-within (thanks for figuring out #hoodsy)
div:focus-within {
background: #444;
}
<div>
<input type="text" />
</div>
// original answer (with IE and Edge support):
Sadly there is no way of selecting the parent, based only on the child's state with pure CSS/styled-components. Although it is a working draft in CSS4, currently no browsers support it. More about this here.
I usually add an onFocus and onBlur attribute to the input field which then triggers a state change. In your case you have a stateless component. Therefore you could use innerRef to add or remove a class from the parent. But I guess you have found this solution already. Nevertheless I'll post it as well:
const styled = styled.default;
const changeParent = ( hasFocus, ref ) => {
// IE11 does not support second argument of toggle, so...
const method = hasFocus ? 'add' : 'remove';
ref.parentElement.classList[ method ]( 'has-focus' );
}
const Parent = () => {
let inputRef = null;
return (
<ParentDiv>
<Input
innerRef={ dom => inputRef = dom }
onFocus={ () => changeParent( true, inputRef ) }
onBlur={ () => changeParent( false, inputRef ) }
/>
</ParentDiv>
);
};
const ParentDiv = styled.div`
background: #fff;
&.has-focus {
background: #444;
}
`;
const Input = styled.input`
color: #2760BC;
&:focus{
color: #000;
}
`;
ReactDOM.render( <Parent />, document.getElementById( 'app' ) );
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>
<div id="app"></div>
A more rigid method is to convert Parent to a class, so you'd be able to use states:
const styled = styled.default;
class Parent extends React.Component {
state = {
hasFocus: false,
}
setFocus = ( hasFocus ) => {
this.setState( { hasFocus } );
}
render() {
return (
<ParentDiv hasFocus={ this.state.hasFocus }>
<Input
onFocus={ () => this.setFocus( true ) }
onBlur={ () => this.setFocus( false ) }
/>
</ParentDiv>
);
}
};
const ParentDiv = styled.div`
background: ${ props => props.hasFocus ? '#444' : '#fff' };
`;
const Input = styled.input`
color: #2760BC;
&:focus{
color: #000;
}
`;
ReactDOM.render( <Parent />, document.getElementById( 'app' ) );
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>
<div id="app"></div>
This way you are in better control of your component and can decide more easily to pass the focus/blur state to other elements.
#hoodsy thanks,it worked like a charm I used like below on the parent div to change color of a label when an input focused .
&:focus-within label{
color: blue;
}