I have been trying to change the underline color decoration of some text according to a specific value given to a React component via this method:
<span className={`underline underline-offset-4 decoration-4 decoration-${decorationColor ? decorationColor : 'primary'}`}> {sentence.text}</span>
However, it is not working correctly. When I inspect the HTML file it has indeed the color I wrote, for instance: decoration-secondary. Nevertheless, the text doesn't appear to be changing accordingly.
If I write directly 'decoration-secondary' instead of passing 'secondary' within the props and then using decoration-${decorationColor ? decorationColor : 'primary'}, it suddenly works.
I found out that this only happens whenever I had not previously directly written the class name within the file. For example: I have used 'bg-primary', 'bg-secondary', and several times in other parts of the app, and thus, when using `bg-${decorationColor ? decorationColor : 'primary'}' it just works perfectly.
TailwindCSS doesn't allow you to generate classes dynamically. So when you use the following to generate the class…
`underline underline-offset-4 decoration-4 decoration-${decorationColor ? decorationColor : 'primary'}
…TailwindCSS will not pick that up as a valid TailwindCSS class and therefore will not produce the necessary CSS.
Instead, you must include the full name of the class in your source code. You can return the full value like this
function myDecoStyle(decorationColor) {
if(decorationColor)
return "underline underline-offset-4 decoration-4 decoration-"+decorationColor;
else
return "underline underline-offset-4 decoration-4 decoration-primary";
}
where decorationColor is your colour value you are passing here.
By doing it this way, the entire string for every class is in your source code, so TailwindCSS will know to generate the applicable CSS.
And use it like
<span className={`${myDecoStyle(secondary)}`}> {sentence.text}</span>
Read more: https://tailwindcss.com/docs/content-configuration#class-detection-in-depth
Came across this when creating an animated dropdown for a navbar.
In a strict React implementation, an inline if/else statement can be used with an onClick toggle to set and remove CSS animation styles. In order to provide a default styling (with no animation) for when state is null, a class can be added before the inline if/else operation:
<div className={`navbar ${reactState ? "expanded" : "collapsed"}`}>
How do I replicate this in NextJS?
I can't find anything in the documentation and have blindly attempted the following (unsuccessfully):
<div className={styles.navbar (reactState ? `${styles.expanded}` : `${styles.collapsed}`)}>
<div className={styles.navbar [reactState ? `${styles.expanded}` : `${styles.collapsed}`]}>
<div className={styles.navbar `${reactState ? `${styles.expanded}` : `${styles.collapsed}`}`}>
The only success I've had is with the following, which seems like overkill:
<div className={
reactState != null ?
(reactState ? `${styles.navbar} ${styles.expanded}`
: `${styles.navbar} ${styles.collapsed}`)
: styles.navbar
}>
I'm clearly not fully understanding how NextJS handles React styling. Any help would be appreciated.
This should work, and it works as same as React. Only you didn't escape the values correctly.
<div className={`${styles.navbar} ${reactState ? styles.expanded : styles.collapsed}`}>...</div>
I'm trying to conditionally change my border color based on whether the textInput is under focus or not.
<View
style={focus? { ...styles.inputRow, ...bgColorOnFocus }: { ...styles.inputRow, ...bgColorOnBlur }}>
This works as expected, but I'm having to repeat inputRow styles twice. I've been trying to improve the code with the following code where I add the object based on whether it's on focus or not and it's throwing an error.
<View style ={
{...styles.inputRow, focus? ...bgColorOnFocus: ...bgColorOnBlur}}
>
I'm not sure if I'm being silly, or if there's something missing that I'm not familiar with? Thanks for looking into this!
Typically a style prop accept an array as a value:
<View style={[styles.inputRow, isFocus ? bgColorOnFocus : bgColorOnBlur]}>
is a valid way to conditionally render some style.
I have multiple components in my project, most of which are simple containers for specific content, with a bit of styling. They typically look like this—
function Portion(props) {
return (
<div id={props.id} className={`portion ${props.className}`}>
{props.children}
</div>
)
}
I have the extra ${props.className} so that it’s easy to add more classes if need be. Now, the problem is that if there are no extra classes for that element, React adds an undefined class.
How can I avoid that?
Try using
${props.className || ""}
you can add a condition;
className={`portion ${props.className || ””}`}
I'm doing some React right now and I was wondering if there is a "correct" way to do conditional styling. In the tutorial they use
style={{
textDecoration: completed ? 'line-through' : 'none'
}}
I prefer not to use inline styling so I want to instead use a class to control conditional styling. How would one approach this in the React way of thinking? Or should I just use this inline styling way?
<div style={{ visibility: this.state.driverDetails.firstName != undefined? 'visible': 'hidden'}}></div>
Checkout the above code. That will do the trick.
If you prefer to use a class name, by all means use a class name.
className={completed ? 'text-strike' : null}
You may also find the classnames package helpful. With it, your code would look like this:
className={classNames({ 'text-strike': completed })}
There's no "correct" way to do conditional styling. Do whatever works best for you. For myself, I prefer to avoid inline styling and use classes in the manner just described.
POSTSCRIPT [06-AUG-2019]
Whilst it remains true that React is unopinionated about styling, these days I would recommend a CSS-in-JS solution; namely styled components or emotion. If you're new to React, stick to CSS classes or inline styles to begin with. But once you're comfortable with React I recommend adopting one of these libraries. I use them in every project.
If you need to conditionally apply inline styles (apply all or nothing) then this notation also works:
style={ someCondition ? { textAlign:'center', paddingTop: '50%'} : {}}
In case 'someCondition' not fulfilled then you pass empty object.
instead of this:
style={{
textDecoration: completed ? 'line-through' : 'none'
}}
you could try the following using short circuiting:
style={{
textDecoration: completed && 'line-through'
}}
https://codeburst.io/javascript-short-circuit-conditionals-bbc13ac3e9eb
key bit of information from the link:
Short circuiting means that in JavaScript when we are evaluating an AND expression (&&), if the first operand is false, JavaScript will short-circuit and not even look at the second operand.
It's worth noting that this would return false if the first operand is false, so might have to consider how this would affect your style.
The other solutions might be more best practice, but thought it would be worth sharing.
inline style handling
style={{backgroundColor: selected ? 'red':'green'}}
using Css
in js
className={`section ${selected && 'section_selected'}`}
in css
.section {
display: flex;
align-items: center;
}
.section_selected{
background-color: whitesmoke;
border-width: 3px !important;
}
same can be done with Js stylesheets
Another way, using inline style and the spread operator
style={{
...completed ? { textDecoration: completed } : {}
}}
That way be useful in some situations where you want to add a bunch of properties at the same time base on the condition.
First, I agree with you as a matter of style - I would also (and do also) conditionally apply classes rather than inline styles. But you can use the same technique:
<div className={{completed ? "completed" : ""}}></div>
For more complex sets of state, accumulate an array of classes and apply them:
var classes = [];
if (completed) classes.push("completed");
if (foo) classes.push("foo");
if (someComplicatedCondition) classes.push("bar");
return <div className={{classes.join(" ")}}></div>;
If you want assign styles based on condition, its better you use a class name for styles. For this assignment, there are different ways. These are two of them.
1.
<div className={`another-class ${condition ? 'active' : ''}`} />
<div className={`another-class ${condition && 'active'}`} />
style={{
whiteSpace: "unset",
wordBreak: "break-all",
backgroundColor: one.read == false && "#e1f4f3",
borderBottom:'0.8px solid #fefefe'
}}
I came across this question while trying to answer the same question. McCrohan's approach with the classes array & join is solid.
Through my experience, I have been working with a lot of legacy ruby code that is being converted to React and as we build the component(s) up I find myself reaching out for both existing css classes and inline styles.
example snippet inside a component:
// if failed, progress bar is red, otherwise green
<div
className={`progress-bar ${failed ? 'failed' : ''}`}
style={{ width: this.getPercentage() }}
/>
Again, I find myself reaching out to legacy css code, "packaging" it with the component and moving on.
So, I really feel that it is a bit in the air as to what is "best" as that label will vary greatly depending on your project.
Sorted way to apply inline styling on some condition.
style={areFieldsDisabled ? {opacity: 0.5} : '' }
If you do not want to overwrite the initial style, you can use empty styling with {}. For instance, assigning a background-color, when you need to keep the initial color if the condition is not met.
style={ onError ? {backgroundColor: 'red'} : {} }
style={ completed ? {textDecoration: 'line-through'} : {} }
The best way to handle styling is by using classes with set of css properties.
example:
<Component className={this.getColor()} />
getColor() {
let class = "badge m2";
class += this.state.count===0 ? "warning" : danger;
return class;
}
You can use somthing like this.
render () {
var btnClass = 'btn';
if (this.state.isPressed) btnClass += ' btn-pressed';
else if (this.state.isHovered) btnClass += ' btn-over';
return <button className={btnClass}>{this.props.label}</button>;
}
Or else, you can use classnames NPM package to make dynamic and conditional className props simpler to work with (especially more so than conditional string manipulation).
classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'
In case someone uses Typescript (which does not except null values for style) and wants to use react styling, I would suggest this hack:
<p
style={choiceStyle ? styles.choiceIsMade : styles.none}>
{question}
</p>
const styles = {
choiceIsMade: {...},
none: {}
}
Change Inline CSS Conditionally Based on Component State.
This is also the Correct way to handle conditional styling in React.
condition ? expressionIfTrue : expressionIfFalse;
example =>
{this.state.input.length > 15 ? inputStyle={border: '3px solid red'}: inputStyle }
This code means that if the character is more than 15 entered in the input field, then our input field's border will be red and the length of the border will be 3px.