I am using following css property in my component styling file in NextJs or if i import my main styles.scss file in my any component.styles.scss file it gives same error:
input[type="date"] {
display: block;
/* Solution 1 */
-webkit-appearance: textfield;
-moz-appearance: textfield;
min-height: 1.2em;
}
But it throws following error as show in image:
Error Image
Looking at the logs, the error seems to be coming from confirm-funding.module.scss
By design, CSS modules are scoped CSS classes and you'll need to import them within a JS file and apply them to an HTML element’s className. In your case, you seem to be using a global selector (button) inside confirm-funding.module.scss which is causing the error.
You can either opt-out from CSS modules or use class selector.
Selectors like html, body, button, input etc are global (unscoped) selectors; in addition, they also are not valid scoped classes (like how .exampleClassName is scoped to a div element in the example above). Next expects CSS modules to be pure in that they don’t produce side effects (like altering the body style based upon a page being loaded or a particular component being loaded -- in the example above, the body is outside of the component-level scope). The reason pure stylesheets are enforced/encouraged is because they allow CSS to be split chunked (when you land on a page, you only download the styles necessary to view that particular page, instead of downloading everything at once).
More details on css modules
Related
As a React beginner I'm currently struggling with it for rendering styled components with the use of pseudo elements ::after and ::before.
Here is the sass style for a button: https://jsfiddle.net/r8qwhfvx/
It is what I try to achieve in React: changing the style of my button on hover using pseudo elements.
But how to use ::after / ::before in the className of button components for instance? JSX syntax unable the use of ::after / ::before in the components className.
I'm just able to write this:
return(
<button className='infoBtn'></button>
);
Please check jsfiddle link.
className JSX attribute is a string variable, which will be set as the class attribute value on the HTML element when it will be rendered by React. CSS pseudo elements can appear in CSS code, not as a class name for a HTML element.
So you need to give a class name to your button using className JSX attribute, then define CSS rules for this class. To do so you need to choose a strategy to setup CSS in your React app. There is multiple solutions :
use a plain old CSS file imported in your index.js or index.html
use a plain old style element in your index.html (these 2 options are global, like in plain old 90's web development)
use JSX "style" attribute : <Component style={{here put CSS object}} /> : https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/
use CSS modules (if you are using create-react-app) : https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/
use styled-components or any other CSS-in-JS option, there is a lot of solutions, I mention styled-components since it is one of the most popular
With all of these options you will be able to use CSS pseudo-element. For SASS you may have to setup a CSS preprocessor. If you are using create-react-app (https://create-react-app.dev/docs/adding-a-sass-stylesheet/) or styled-components (https://styled-components.com/docs/faqs#can-i-nest-rules) you're good to go, it's build in. Well for styled-components I'm not sure if it is a true full SASS support though.
Good luck with that !
I am using Material UI for building my React Project.
However there is a component which has to be embedded to a different site. Meaning, I am providing the production build of this component to embed it to a different site.
My React app's css is getting overridden by the global styles defined in that website.
I don't want this behaviour. Is there any way I can isolate the css of my react app and the global css of the other website.
I saw this question but the solutions didn't help me.
If iframes and Web Components are out of the question, the only remaining option is CSS resets.
Create a CSS class and a series of rules that reset the styles of any elements that occur inside that class.
.my-reset {
/* Global resets (e.g. font family) */
}
.my-reset p {
/* Reset paragraph styles */
}
.my-reset label {
/* Reset label styles */
}
/* etc. */
Apply that class to the root-level component:
function MyApp() {
<div className="my-reset">
{ /* app goes here */ }
</div>
}
There are plenty of CSS reset libraries out there. Since you have no control over global styles, you're going to have to be heavy handed with the resets. So if it's at all possible, make your component embeddable as an iframe.
I see multiple solutions to this problem
Use !important in those styles possible.
Use id to give styling instead of class, as id has higher presidence.
If you give more specific styling to the elements then the build file css will override the outer site's css, i.e like if we write our css like .parent#child this is more specific styling and it will override the wrapper site's css.
Check this out https://stuffandnonsense.co.uk/archives/css_specificity_wars.html
There's another sort of scrappy solution that you could use in the case where you don't need the old table style and the new Material-UI tables on the same HTML page.
If you own the site that you are trying to embed the React app in (i.e., you have control over the new environment's CSS), another thing you could do to reset the CSS styles for the components in your app is to remove the classes that are overwriting your styles.
For example, if you're using Material-UI tables and your existing table styles are affecting the render, you could put the existing table styles into a separate CSS file that you only import when you render your existing tables, on another HTML page.
I am trying to style (styled-components) a fabric js component (Dropdown) as a react component.
The css class names are declared in a file office-ui-fabric-react/lib/components/Dropdown/Dropdown.scss.d.ts. Example:
export declare const root = "root_15a7b352";
I want to import this class name so I can use it in styled.
AFAIK this is TypeScript global variable and I tried looking for information on how to get to it but with no success.
The statement declare const root is not the same as const root. It means:
There is a variable called root somewhere else, and I'm just here to describe it.
In other words, it tells us something on the type level, but it doesn't contain any executable code. It's not possible to consume it in runtime. You can verify it by inspecting the generated code in TypeScript playground.
Most likely it's meant to be imported from someplace else, or is, in fact, a global variable Since the declaration file describes Dropdown.scss, it's likely that root is a CSS class living in that file. Try:
import { root } from 'office-ui-fabric-react/lib/components/Dropdown/Dropdown.scss'
Karol Majeswski's Answer gets it right on importing the variable from typescript.
However, it seems your intention is to style parts of the dropdown using styled-components, instead of importing this variable from scss file, the Dropdown component provides readable classnames like ms-Dropdown-title that can be used for styling.
For eg. to style the Dropdown, you would use:
const StyledDropdown = styled(Dropdown)`
color: red;
& .ms-Dropdown-title {
background-color: red;
}
`;
See Codepen example
In an app derived from react-boilerplate using styled-components 3.3.2 I am trying to display SVGs in pseudo-classes like this:
import arrowDown from 'images/ico-arrow-down.svg'
import arrowUp from 'images/ico-arrow-up.svg'
const Tab = styled.div`
&:after {
content: url("${arrowUp}");
position: relative;
}
&.active:after {
content: url("${arrowDown}");
}
`;
However, the first use of content: url("${...}") breaks all following style definitions in the block.
In this case &.active:after styles are ignored, while position: relative in the &:after definition is parsed.
The SVGs look properly formatted and they do get url-encoded. However, after much testing, the part in the SVG that breaks the styling seems to be the parentheses in transform="translate(...)" attributes, which do not get url-encoded. Should they be?
If I assign the SVGs in background definitions instead of a pseudo-class content everything works as intended, so it doesn't seem to be a problem with the general setup.
Is this a bug? If yes where? How can I work around this (except using the SVGs in backgrounds)? Can I circumvent the data parsing and plainly insert the SVG file URL somehow (asking as a Webpack / React newbie)?
I am using react server side rendering and client side rendering (hydrate) with fontawesome but when page is rendering, the icon is huge until it scales down and the correct size class is added to the icon OR the css is loaded (I dont know).
Turn off autoAddCss:
import { library, config } from '#fortawesome/fontawesome-svg-core'
config.autoAddCss = false
Load in CSS directly in SCSS file:
#import 'node_modules/#fortawesome/fontawesome-svg-core/styles'
Please, see this article:
https://fontawesome.com/how-to-use/on-the-web/other-topics/server-side-rendering
In react you need to this in your layout or global config:
import { library, config, dom } from '#fortawesome/fontawesome-svg-core'
config.autoAddCss = false
...
And in your style put this:
<style jsx global>{`
...
#import url('https://fonts.googleapis.com/css?family=Didact+Gothic');
${dom.css()}
...
`}</style>
This is an issue with the CSS loading after the page renders initially, as you have guessed. The solution that I have found is to either make sure the CSS on the server renders on the same page as the icon (depending on what frameworks you are using to manage stylesheets), or to make sure that whatever .css file you are using for this gets loaded before the html renders. This can be done by making sure the link tag for the stylesheet appears near the top of your page.