I am new to the React javascript framework and have a question about styling using CSS.
Using jQuery, my old workflow was to pick an element on the screen, inspect it in Chrome, note the selector/s that triggered the styling, change the element styling in the browser, and then save it to css/sass etc. If the widget had a hover-state I could make the element visible to see what it looked like.
However using React, and especially for components that someone else has coded, where the component does a 'pop-up' etc, I can't manipulate the DOM to see the component because it is removed from the DOM before I can inspect it.
Now of course I could read the external library code, work out how it works, but CSS inheritance means it would take some time to work out exactly is happening and this seems to be slower than what I was doing before - especially for a simple change.
So my question is, what is the preferred workflow for overloading the CSS for DOM elements that are removed before they can be inspected?
Related
Does inline styling effects a react app load time (FCP, LCP)?
How does it differ from styling in a css file?
Inline styling shouldn't affect react app load time. Furthermore, if there is a chance it affects it, it should lower the time of app render. Anyway, its not recommended to do inline styling, as it makes ur code messy. There are certain cases that u can use inline styling with one rule, but generally its much better to use classes defined in css file
When it comes to inline style within a React component we know it basically is JSX that we are talking about and styling that happens in inline is basically passing an Object to the style prop. Internally ReactDOM takes care of all this.
And DOM styling is managed hence forth. It does differ from loading from CSS file in the same way that you can style in Javascript using imperative approach.
Now coming to the question whether it impacts load speed and you have used (FCP,LCP) in the Bracket.Actually LCP is actually considered only for few elements.
Learn more from https://web.dev/lcp/
Overall I believe, it depends how many style properties are used
inline. And still I believe, It actually increases the load time and
does not decrease it in case of React (because Javascript is involved
not direct CSS file [hence additional work]) for ReactDOM.
I am working with a freelance client on the side that wants to utilize Angular Material throughout the project. However, they do not like the way that the underline looks in the angular material input. I have tried a variety of approaches to change this, but I haven't found any success yet.
To be honest, I haven't even been able to find the tag in the DOM that would let me alter that border.
Here are the Angular Material docs, as you can see all of the available options have at least some form of a bottom border.
Some approaches I've tried:
This one is from the old angular material and no longer works for the new angular material
The accepted answer here is for the new angular material, but I was not able to get it to work. I implemented exactly as described and no styling changed.
This approach looked like it would work. Unfortunately, I could not get it to work either.
Any help or input on this topic would be appreciated.
For reference, the client said that any changes that deviated from the desired design would be denied. So I have to get this to work. I believe I could maybe, possibly lobby to build a custom input component as a solution, but I know that they are dead set on Angular Material.
Edit. Added a pic of desired look:
this little code did it for me. I didn't want to display it and just set height and width to 0.
::ng-deep .mat-form-field-underline{
height:0 !important;
width:0 !important;
}
However I think its kinda hard to style the Angular Material Components and for me its sometimes better to built my own.
First of all, you'll need a .scss to be imported either within the default theme.scss or after the import of the material stylesheet in main.scss.
Now, Material offers you the option of customising colours and some of the styles by overriding their #mixins found somewhere in the Material folder ( I don't have the folder in front of me.. very sorry for the vague pointing... ).
Back to the newly added file; You can override material's default styling by checking the DOM for certain classes and then adding them in said file with the desired changes. Because the file is loaded after Material's, the default styling in overridden. Same thing applies for the #mixin you chose to override. Just have a look in the file, copy-paste the whole #mixin and change accordingly.
Now if you wish to go even further, my colleagues and I have a custom library that uses Material BUT the whole styling is stripped off leaving you with the bear input within the mat-form-group and then using a <input disabled/> with a position:absolute over it. That way you get to benefit from material without using their style.
I've been working with React for a little while but animations is one thing that is confusing me.
Currently I use CSS in my react components. Each component imports a single css file that I use for styling instead of using inline css.
My question is: If I have a page like a landing page where there is no state being updated whether it is fine to use keyframe animations and similar things in css?
Side-question: Am I free to use keyframes for a non updating page like a landing page, or will it totally break for more complicated pages?
You are 100% safe to use any CSS you want in your pages. CSS is merely a language used for describing the style and presentation of your elements. React doesn't care about all that; it cares only for the DOM of your page - or at least the part of the DOM that React created/controls.
The Document Object Model (DOM) [...] provides a structured representation of the document as a tree.
CSS doesn't (cannot) interact with the tree structure of the DOM, nor do CSS animations. They just apply style properties to the elements which, depending on the animation, may give the impression that the layout of your DOM tree changes, but this is not the case.
So to answer both your questions: No css will break your code or otherwise interfere with React, regardless of implementation.
I've written a few Polymer components so far and for my more complicated stuff I love how their styling is isolated from the rest of the page. It's been much easier to use them across multiple apps.
However, today I'm creating a super simple component, and I'm realizing that I'd really like to have the page's styles bleed in. I've got a component that packages up a bunch of logic, but just renders a basic <a href> link. Is it possible through CSS or other means to have that link inherit its styling from the rest of the page?
appyAuthorStyles used to be great for this. Unfortunately, it's no longer in the Shadow DOM spec.
Your two solutions are:
Create a small stylesheet (e.g. shared.css) that includes the common rules the page and component use.
Use ::shadow and /deep/ to style the link from the outside, the same way as the page styles its links.
I'm not sure this is possible, but id like to set all user styles back to chrome defaults for div and descendants.
I'm building a Chrome plugin that creates a popup on any web page, however due to the fact every page has a plethora of custom styles, trying to track down every inconsistency and overwrite it with my divs (and descendants) custom style, it is becoming a nightmare.
Every time I think I've covered all bases another site implements something else that needs to be overridden.
What would be the easiest approach to standardize my popup in this situation?
One approach I can think of is to (bite the bullet) and get a hold of the the default Chrome CSS styles and implement them into a series of catch all descendant selectors, however surely there is a better way.
If you want to be absolutely sure that the styling of your elements is not affected by the web-page's CSS, there are 2 possible solutions:
Use an iframe to implement your popup. (This solution is "safe" and simple enough, but based on the kind of interaction between the popup and the web-page it might become cumbersome.)
Utilize the Shadow DOM. (This is probably the "proper" solution, but the implementation might be a little more complicated.)
Some resources regarding the 2nd solution:
An introductory tutorial.
An actual example of incorporating the "Shadow DOM" concept into a Chrome extension:
RobW's Display Anchors extension
There is a third option worth discussing and rejecting, which is to reset all the style properties of the div and its descendents to its default value. Pseudo-code:
#my-div, #my-div * {
#for-every-css-property {
%propertyName: initial !important;
}
}
This answer shows an attempt at such a solution. It uses specific values instead of initial which will work in older browsers without the initial keyword, but will not correctly reset elements which have a different default from the base (e.g. user566245 mentions that textarea elements should have a border).
Issues:
Unfortunately initial is not actually the browser's default value.
If we don't use !important above then there is a risk that the page might have provided a rule with a more specific elector which overrides our own. For example if the page specified properties for table > tr > td then this would be applied over our rule because that selector is more specific than #my-div *.
Since we do use !important, any custom styling we want to do after the reset must also use !important on every property.
If the page happens to inject any additional CSS styles after ours that uses !important then these can override our reset.
It is rather inefficient. We are asking the browser to apply a huge bunch of CSS rules to every element under our div.
Vendor-specific properties should also be reset. (E.g. -webkit-animation-name.)
If new CSS properties come into existence in future, you will need to update your list.
Whilst this solution can be applied to current browsers, it is rather horrible, so roll on Shadow DOM! I would recommend the <iframe> solution in the meantime.
I don't know if anyone has tried this, but a more efficient solution might be to use Javascript to detect what site-defined CSS properties could be problematic, and reset only those.