I am getting above error in my react project when chrome version is updated to 74 (latest version).
The root cause of this issue is described here. Essentially this happens when you pass style property of some elemnt as string or array. Like style="string" or style={[array]}. This may seem not relevant (I don't think that someone intentionally try to send string or Array to style property), but in my case this was root cause.
To find error I recommend to carefully investigate your code with debugger in Chrome or other browser.
Below is example of my error
I erroniously set styles.radioButton (which is used as value for style property for some element) using spread operator ...spacing.xxSmall, but spacing.xxSmall is just a string and spreaded to array with chars as array members. Previously properties with indexes (0, 1, 2, ...) of style has been ignored, but now site is crushed.
I work with Angular libraries and some of them does not support inline styles now (for me it was ngx-avatar and it not working on Firefox and chrome: 74)
before:
<ngx-avatar style="border-radius="50%"></ngx-avatar>
after:
<ngx-avatar [style.border-radius]="'50%'"></ngx-avatar>
I think you can try the same for React.
In my RN Expo Web application I was getting this error while doing something like
style={{ padding: 5, ...props.style }}
I Realized that passing prop named "style" and then using it as inline style was causing this error. What resolved it for me was using a different name for the prop and doing something like ...
style={{ padding: 5, ...props.listSectionStyle }}
Merely changing prop name from 'style' to anything else like 'listSectionStyle' (or any of your choice) should resolve if it is due to above stated reason.
Ref: link shared by Fyodor in his reply helped understand the real issue.
I was getting this error with prime ng's <p-skeleton>. What I was doing is passing a style directly to the skeleton like below:
<p-skeleton width="97.5%" height="20rem" style="margin-bottom: 2rem;"></p-skeleton>
So instead of using style directly I used the class property to give the margin bottom (my class was already defined). This removed the error for me. And updated line is as follows:
<p-skeleton width="97.5%" height="20rem" borderRadius="16px" class="mb-40"></p-skeleton>
For Expo/RN
You're probably giving an array of malformed stylesheets this way:
<compo style={[foo, biz, bar]} />
What you need to do is flatten your stylesheets:
import * as Native from 'react-native';
<compo style={Native.StyleSheet.flatten([foo, biz, bar])} />
Related
I want to do the equivalent of style="background-image: url(foo.jpg); background-image: -webkit-image-set(url(foo_1x.jpg) 1x, url(foo_2x.jpg) 2x)" in a React component.
React requires me to provide a style object, not a string. But a JS object can't have the same property twice.
How do I get two background-image properties? Also, the order is significant – the image-set needs to be last.
It needs to be an inline style. (Because the URL is a dynamic, interpolated value retrieved from DB.)
I think I initially misunderstood your question. Seems you are looking to create a style object to pass as a prop to a component. You can combine your background images into a single comma separated list. You can use a string template to inject the dynamic image urls at runtime.
const style = {
backgroundImage: `url(${url1}),-webkit-image-set(url(${url2}) 1x, url(${url3}) 2x)`,
};
"spassvogel" on GitHub has a clever solution using CSS variables: https://github.com/facebook/react/issues/20757#issuecomment-776191029
The idea is to set CSS variables in the style property, like
style={ "--url1": "url(1.jpg)", "--url2": "url(2.jpg)" }
and then using them from an external style sheet, like
background-image: var(--url1);
and so on.
Turns out this still wasn't enough to solve everything I wanted – this rabbit hole runs ever deeper – but that's no fault of React's, so I'll consider this a valid answer.
I'm currently using react-starter-kit and have a few react components each with their own styling file (scss). Basically, every component imports styling file on top like:
import s from './Header.scss';
Now, for css classes that do not have hyphens (e.g: 'notification'), I can use it without any problem, but I can't figure out how to use hyphenated css classes:
render() {
return (
<div className={s.header-inner}> </div>
);
}
This obviously throws an error: 'inner is undefined'.
I changed header-inner to header_inner and the same in my component and it works fine but I can't do it as my css file is pretty huge with hundreds of classes.
Any help would be really appreciated.
Thanks
- isn't a valid identifier character, so your original code would be evaluated as:
s.header - inner
You haven't defined a variable called inner so you get a reference error.
However any character can be used to make up a key for an object, so you can use a string to access the property you want.
return (
<div className={s['header-inner']}> </div>
);
You can set css class by dot without using a string inside a bracket.
See https://github.com/webpack/css-loader
If you set webpack config's css-loader to
css-loader?camelCase
Now you can do something like this
<div className={s.headerInner}> </div>
s['header-inner']
In Javascript, dot notation is a convenience, but it doesn't work for illegal variables. In that case, use the bracket notation.
Also, unrelated but you'll likely encounter this soon as well: CSS styles in javascript are turned camelCase. So, if you're setting a style:
<div style={{ backgroundColor: '#FFF', zIndex: 3 }} />
I am manipulating CSS styles using React with code that resembles this:
let el React.findDOMNode(this.refs.thing);
el.style.transform = `translate(${0}px, ${0}px) scale(${1})`;
el.style.transformOrigin = `${100}px ${100}px)`; // SPOT THE TYPO
The transform CSS property works and shows up when I inspect the element in the browser (Chrome). The transform-origin property does not show up, and I cannot figure out why.
I log to the console just before this code, so it is being executed. When I intentionally do something like:
el.style['transform-origin'] = etc.
I don't get a warning from React, despite using the development build.
As spotted by wintvelt, there was a spurious parenthesis in my code:
el.style.transformOrigin = `${100}px ${100}px`;
is correct.
I am writing some protractor tests for an Angular app.
After blurring an input field, a CSS file is reloaded in the application, and I'd like to test if that style has effectively being applied to the elements that uses classes from that CSS file.
I've seen I can read values that are effectively on the styles attribute.
If it is not possible, then is there any way to test some element is rendered correctly using protractor??
element.all(by.css('.input')).get(0).then(function(styleProperty){
styleProperty.clear();
styleProperty.sendKeys('10px', protractor.Key.TAB);
element(by.css('.element')).getCssValue('border').then(function (borderCssValue) {
expect(borderCssValue).toBe('10px');
});
Message:
Expected '' to be '10px'.
border is not a valid css value, since it expands to border-top, border-left, etc. Try
element(by.css('.element')).getCssValue('border-top').then(...)
Im trying to figure out how to make this work on IE:
<div ng-if="result.is_mesurable==true" style="left:{{ (result.user_score * 20)-10}}%" class="test-box">
The code basically generates a dynamic table, and the left position of the object is taken from the user_score value.
I know that IE doesn't read this declaration properly, i had a similar bug in the past:
AngularJS weird render issue
"Because {{xxx.xxx}} is invalid css it is trucated by IE and when the angular compiler scans all attributes, the style attribute is empty."
I know there must be a similar solution, but so far i've been unable to figure it out.
Thx in advance.
also, just to note, the result on IE is an empty style attr.
The issue is the same, solvable with ng-style or ng-attr-style:
ng-style:
<div ng-style="{left: ((result.user_score * 20) - 10) + '%'}" class="test-box" ng-if="result.is_mesurable==true">
ng-attr-*
<div ng-attr-style="left:{{ (result.user_score * 20)-10}}%" class="test-box" ng-if="result.is_mesurable==true" >