I am currently building out the admin side of my first React app, which was started with create-react-app (also styled-components if it matters in this case).
Instead of building out my own custom admin I'm using Semantic UI React. Part of this involves importing the styles:
import 'semantic-ui-css/semantic.min.css';
I'm doing this in my admin container component. The problem I'm running in to is that once I import those styles the global selectors are applied site-wide, even though I only want them in the admin side of things.
Is there a standard practice for restricting imported styles to a given area of your app? I'm pretty unfamiliar with this.
You need to use a style loader supporting CSS modules spec.
This loader would namespace your component's css classes with a parent unique class. This would prevent your css classes from leaking to global namespace.
Example, I had used isomorphic style loader from kriasoft which did this.
Related
Can I use both css and tailwind/bootstrap/others in a react application?
In a React application, you may utilize CSS as well as Tailwind, Bootstrap, or other CSS frameworks. You may use the CSS framework of your choosing to style your React components by include it in your project. Additionally, if necessary, you may create your own CSS styles for particular components.
Yes, you can combine as you please, however it is not recommended. May I ask the reason?
The bundle size of your production build will increase drastically if you use multiple multiple styling libraries
enter image description hereI am using React, Typescript and Styled components. Everything looks fine but I am seeing multiple styles tag under my head tag. I would like to know why it is creating multiple styles tag and is there any way to combine all styletags into one.
For example , I am creating a dropdown in a loop and it has 3 values and it generates 3 style tag under my head tag
Thanks all
From what I understand, I believe this is expected behavior assuming you're utilizing style partials for each component. React (and other front end frameworks like Angular) is importing the styles that apply to the current view. It does this by importing them individually as the page renders different views.
This isn't always ideal, though. I often create CSS partials in a global styles folder if I want to share styles across components. The only styles I put in the component specific CSS file are styles that are 100% specific to that component and I don't ever want to share.
You could also always create a shared CSS file that you import once - ie - dropdown.css (or .scss etc if you're using a pre-processor) and delete the react component specific CSS files that you will be replacing with this new global version. The downside being that whatever CSS you have in there will always be imported even if the dropdown isn't being rendered or viewed.
As my first React Project, I want to create a DatePicker component and I would like to use CSS Modules.
However, CSS Modules generates a unique class and I would like to know if it is possible for the user to customize a nested component for example ?
What is a nested component in this case? CSS modules will encapsulate your styles, you can still write any kind of valid CSS in that file..
Noob Question: Is the intention of the cSS API to make it possible to use the components as normal HTML without the need for any additional React code? Does the usage of only the CSS API therefore require the inclusion of the React JS package or can the Blueprint JS package alone work ?
As an author of Blueprint, I can confirm that it is in fact possible to use some of the Blueprint components via CSS only. Components that describe a CSS API in the documentation can be used without React, but usually with caveats (the biggest being that you must write the markup correctly). The CSS API is presented as an alternative to the JavaScript (React) API, and CSS modifiers are supported by the JS APIs through the className prop.
As Blueprint is a React-based UI toolkit, the best experience will be had by using React, primarily because you no longer have to write the markup correctly.
It is not possible to use the components as normal HTML, without ReactJS. Blueprint is a ReactJS UI toolkit for the web.
Their pre-made (React) components are customizable via a JavaScript API or a CSS API (or both).
The idea behind the CSS API, that some of the components have, is to provide additional options for style customization.
Let's use an example. See the Menu component. Its CSS API allows us to modify Menu's style. One example is that we can add icons to menu items, read in their docs:
Add icons to menu items the same way you would to buttons: simply add the appropriate pt-icon-<name> class*.
PS: I'd recommend you to head over the ReactJS docs, understand how ReactJS components work, get deeper knowledge about the core ReactJS concepts (or complete a fundamentals course) and only then - try to implement BlueprintJS.
for react web, I'd like to try semantic-ui (http://react.semantic-ui.com/usage)
for react-native, I don't think there's a framework that can help us with styling. (which is hard to believe, maybe I'm too new to react world)
My question is, Is there a way for us to share styles for the two platforms (web/native) somehow?
There are external dependencies that could be used as tools to achieve what you are talking about react-native-css is one option.
Without any external dependencies I think you can still achieve succesfull results... You will just need to export style modules in your react-native app and pass them as props. You can use the Platform module (from rn) to conditionally render styles depending on device operating system. Remember, layouts in react native are created with flexbox so any successful shared styles between web and native would have to be written with that in mind. (Bootstrap 4 supports flex.)