I wanted to use Emotion with CRA so I installed it following the documentation and tried to use the css prop as shown in the example below :
import { FC } from "react";
import { TypographyProps } from "./Typography.propTypes";
import * as styles from "./Typography.styles";
export const Typography: FC<TypographyProps> = ({
children,
}) => {
return <h1 css={styles.typography}>{children}</h1>;
};
but it didn't work.
By inspecting the code, I found this :
<h1 css="You have tried to stringify object returned from `css` function.
It isn't supposed to be used directly (e.g. as value of the `className` prop),
but rather handed to emotion so it can handle it (e.g. as value of `css` prop).">
Header</h1>
I tried following the solution from this blog article, but still didn't work :
https://harryhedger.medium.com/quick-how-to-use-the-emotion-css-prop-with-create-react-app-5f6aa0f0c5c5
Any thing I can do to fix it?
Thanks!
The easiest way to fix this is to add the following line at the beginning of your file.
/** #jsxImportSource #emotion/react */
Related
I've had a look around and there doesn't really seem to be an answer to this.
I have an CMS API that provides things like branding colors etc... for a React app that can "reskin" it's self using a mix of colors and images etc...
I'm working on a V2 of this app and want to switch from sass/scss to tailwind. With sass and scss we kind of just overwrote colors with CSS in JS and it worked pretty well.
In tailwind if you want to add a custom color pallet you need to create a config file etc... This will not work for my indented use as the colors will be changing on the fly.
Imagine a component:
import { FC } from 'react';
const MyComponent: FC = () => {
return <div className='bg-blue-500'></div>;
};
This works great however if I want to change the color as a one off I could use a classname like bg-[#f1f1f1] and this also works great!
However the issue seems to come if I get React to put this color as a template string, like so:
import { FC } from 'react';
import { useBranding } from '../some_path';
const MyComponent: FC = () => {
const [branding] = useBranding(); // custom hook, all you need to know is it has colours that it spits out colors
return <div className={`bg-[${branding.colours.primary}]`}></div>;
};
At this point if I inspect the page I can see the color code goes in and should work. However I'm assuming that Tailwind has some preprocessing that get skipped if I do this?
Any ideas on how I can use colors in this way with tailwind?
Tailwind doesn't detect classes after build.
I might be wrong as you're not showing how your hook works, but I'd say you can use style tag instead:
import { FC } from 'react';
import { useBranding } from '../some_path';
const MyComponent: FC = () => {
const [branding] = useBranding(); // custom hook, all you need to know is it has colours that it spits out colors
return <div style={{backgroundColor: branding.colours.primary}}></div>;
};
Trying to render a pdf using react-pdf and I swear I've done every configuration of their docs and nothings working. I keep getting
ReferenceError: $RefreshReg$ is not defined
Proof of concept component. Yes, the options aren't be used in this snippet but I've tried using it. I tried bringing in the cmaps directly into this components and referencing it there. I tried the copy webpack plugin and doing exactly as the documentation suggest. Nothing has worked. It's always this same error. Hoping I've just missed some minor detail.
/* eslint-disable #typescript-eslint/no-var-requires */
/* eslint-disable #typescript-eslint/no-unsafe-assignment */
/* eslint-disable #typescript-eslint/no-empty-function */
/* eslint-disable #typescript-eslint/ban-ts-comment */
import { Container, Paper } from '#material-ui/core';
import React, { useState } from 'react';
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';
import { pdfjs } from 'react-pdf';
import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
pdfjs.GlobalWorkerOptions.workerSrc = 'pdf.worker.min.js';
const options = {
cMapUrl: `//cdn.jsdelivr.net/npm/pdfjs-dist#${pdfjs.version}/cmaps/`,
cMapPacked: false
};
export default function TVRPreview() {
const [numPages, setNumPages] = useState(null);
const [pageNumber, setPageNumber] = useState(1);
function onDocumentLoadSuccess({ numPages }: any) {
setNumPages(numPages);
}
return (
<Container>
<Paper>TVR Preview</Paper>
<Paper elevation={6}>
<Document file="./PDFTestTVR.pdf" onLoadSuccess={onDocumentLoadSuccess}>
<Page pageNumber={pageNumber}></Page>
</Document>
</Paper>
</Container>
);
}
Project Details
Create React App using react-app-rewired
"start": "react-app-rewired start",
Just to be sure is everything working as well, make the following steps:
Change the const options to:
const options = {
cMapUrl: 'cmaps/',
cMapPacked: true,
};
and here:
<Document file="./PDFTestTVR.pdf" onLoadSuccess={onDocumentLoadSuccess}>
Change this file reference to any pdf located someplace on the internet.
Two problems are possible here..
Make sure your local pdf file is located in public folder.
Use pdfjs.version like this instead of passing in options.
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
Documentation: react-pdf
I am using Next.js with Typescript. The margin of the body is default 8px and I want to get it to 0px. When I try to add an external style sheet to my index.tsx file it throws an error that you can only add external stylesheet to _app.tsx. However, even when I try to import in my _app.tsx, it doesn't change the global style of the body. I am using Emotion css for the styling part. Is there a different way to change the style of the body in the index file using global style? Here is my index.tsx code and I have tried adding the global styles using Emotion CSS as well but it doesn't work.
class Index extends React.Component {
render() {
return (
<div className='body'>
<Container>
<style jsx global>{`
.body:global() {
margin: 0px;
}
`}</style>
<NavBar />
</Container>
</div>
);
}
}
You need some global styles (<style jsx global>) to style the body element or provide css resets.
Example:
import Link from "next/link";
export default () => (
<div>
<style jsx global>{`
body {
background-color: red;
}
`}</style>
Hello, One!
<Link href="/two">
<a>Go to two</a>
</Link>
</div>
);
Code Sandbox
You can have global styles using emotion with Next.js
In your _app.tsx file, you must to
import { Global, css } from '#emotion/core'
return (
<>
<Global styles={css` /* styles */ `}/>
<Component {...pageProps} />
</>
You can see how to implement it, here
https://github.com/pabloobandodev/social-media/blob/master/pages/_app.tsx
According to the official docs:
Global CSS cannot be used in files other than your Custom <App> due to its side-effects and ordering problems.
Possible Ways to Fix It
Relocate all Global CSS imports to your pages/_app.js file.
How to do this in your case?
Well, the best way is to use a CSS base, lets take normalize.css for example.
Run yarn add normalize.css or npm i normalize.css, depending on whichever you are using.
Add import 'normalize.css'; in each of the page you want to use the base on. Official Docs.
Well this could seem redundant if you want to use the base in all of your pages. If so, you can, alternatively, create a file page/_app.tsx (any of the extension .js,.jsx,.ts,.tsx will work) and put this in it:
import 'normalize.css';
export { default } from 'next/app';
Note : If your app is running and you just added a custom App, you'll need to restart the development server. Only required if pages/_app.tsx didn't exist before.
No need to worry about other caveats mentioned in the docs as we are simply re-exporting App without any modification.
There are many CSS bases available choose any that seems best for you.
If you want to add custom global styles, then follow this:
Create a file styles/globals.css (.scss,.sass,etc. will also work if you have configured Next.js properly) and put your styles in that file.
Now add an import in pages/_app.tsx.
import '../styles/globals.css'; // change extension from `.css` to
// whatever you created above
export { default } from 'next/app';
If you have already created a module path alias for ../styles, then you might wanna change the styles import statement (probably to something like import '#styles/globals.css').
Also, if you are using less/sass/scss and want to use a base at the same time along with your custom global styles you simply need to use an import statement in your stylesheet (no need to import the base in _app.tsx if imported in the global stylesheet). An example:
// file: styles/globals.scss
#import '../node_modules/normalize.css/normalize.css';
// your styles...
body {
color: red;
}
// file: pages/_app.tsx
import '#styles/globals.scss';
export { default } from 'next/app';
Moreover, in your case it has not worked most probably because you were styling .body instead of body. It is likely that margin was present in the body, not your div.body.
This is how your _app.js, _app.tsx should look like; styles.css may have your CSS to reset the default browser properties, you can try adding other stylesheets here.
import '../styles/styles.css'
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
}
In react-jss documentation, the authors have written:
'HOC based API is deprecated as of v10 and will be removed in v11.'
This means, as far as I understand, that such HOC functionality as injectSheet and withStyles will no longer be available in V11.
The new react-based stylesheet generating functions seem to be all based on react hooks. The function createUseStyles seemed very promising to myself and my team, until upon looking further into the source code we realised that it was only available within functional components, as it makes use of hooks.
The Problem
As a team we still make heavy use of React Class components and have no plans to move completely to hooks, not because hooks aren't useful, but because sometimes functional components aren't the best or most organised solution to writing a component.
Perhaps I'm missing something-- but it seems like there is now no solution left for React Class based components, other than writing our own manual implementation from core jss.
What solutions are there for a developer to make use of react-jss in a way similar to that achieved by createUseStyles, keeping up with the latest version of react-jss, being able to pass dynamic props, and etc. without writing a manual implementation?
While not specific to JSS, keep in mind that you can always use a tiny wrapper to convert any Hook to render prop or a HOC.
Converting Hook to a render prop is described here: https://reacttraining.com/blog/using-hooks-in-classes/
You can use a similar approach to convert any Hook to a HOC.
import { Classes } from 'jss';
import { createUseStyles } from 'react-jss';
First, lets create a more type safe function for creating styles.
export function createStyles(classes: { [name: string]: Partial<CSSStyleDeclaration> }) {
return createUseStyles(classes as any);
}
Secondly, we'll create a simple wrapper to allow hooks for our components.
function Styles<T extends string | number | symbol>(props: { styles: () => Classes<T>, children: (classes: Classes<T>) => ReactElement }) {
const classes = props.styles();
return props.children(classes);
}
Example
const styles = createStyles({
title: {
fontSize: '25px',
textTransform: 'uppercase'
},
message: {
color: 'red'
}
});
export const App = () => (
<Styles styles={styles}>
{classes => (
<Fragment>
<h1 className={classes.title}>Title</h1>
<p className={classes.message}>message</p>
</Fragment>
)}
</Styles>
);
Output
I'm currently working with rails and reactjs. I'm having difficulties using css in my reactjs files. It seems like every time i try to use it, no change is being applied at all. In my App.jsx file I have this:
import React from "react";
import styles from "./styles.css";
export default class Register extends React.Component {
render() {
return (
<div className={styles.container}>
<h1> this text should appear to the right </h1>
</div>
);
}
}
And in my styles.css file I have this:
.container {
width:40%;
text-align:right;
}
For the record I am using webpack. Can anyone help me understand why the css isn't having any effect on my jsx components. I've looked all over for help but was unable to put the pieces together.
If it matters, this is how my "config/webpack/development.js" file looks like:
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()
It depends on the webpack loader settings. If you are using css-loader as configured in react-scripts (as of 1.1.5), then the classNames are loaded using {modules: false} option, i.e. global styles, which can be referenced as strings in JSX code:
import "./styles.css";
... className="container" ...
Or you can load local styles using following CSS-file syntax:
:local .container {...
Or edit your webpack.config.js appropriately (see https://github.com/webpack-contrib/css-loader#scope for the official documentation of various options).
seems like you didn't enable an option { modules: true } for css-loader in webpack config
take a look
webpack-contrib/sass-loader#206
https://github.com/webpack-contrib/css-loader#options
Taken from: https://github.com/facebook/create-react-app/issues/1350