I'm using Rollup + React + Post CSS to build a component library. I'm looking for a way to autoprefix class names so that they will not conflict with styles in the project using the library.
I have already added this plugin to automate adding the 'prefix-' to every class name in the CSS:
Post CSS Prefixer
However, this does not modify the JavaScript (JSX), so the React components are still using the unnamed classes as className attributes.
Is there a way to use Rollup to automatically modify className attributes to include the same prefix specified in the CSS?
Note that I'm not looking for a fully modular solution such as CSS Modules, as I want the same 'prefix-' across every component inside the library.
You can't use static classNames to use this feature. To use it you need import style as object and assign it as object also.
import React from "react";
import style from "style.css";
class DivMyStyle extends React.Component {
render() {
return <div className={style.myStyle} />
}
}
Related
I imported all necessary libs.
import "#microsoft/mgt";
import "#microsoft/teams-js"
put tag MgtTeamsChannelPicker into my render section
render() {
return (
<MgtTeamsChannelPicker></MgtTeamsChannelPicker>
);
}
than i got an error.
Due to how react handles custom elements, they must be referenced differently. Alternatively you can use our wrapper here:
https://github.com/nmetulev/mgt-react
which will allow you to reference the component in the following way:
import { TeamsChannelPicker } from 'mgt-react';
<TeamsChannelPicker></TeamsChannelPicker>
quick note: The names of the React components are in PascalCase and do not include the Mgt prefix
With create-react-app and JavaScript/TypeScript, I understand I'm able to "import" an SVG as noted below. How may I do so with ReasonML?
import { ReactComponent as Logo } from './logo.svg';
function App() {
return (
<div>
{/* Logo is an actual React component */}
<Logo />
</div>
);
}
Create React App uses webpack to transform SVG files into React components. If you’re using Reason with CRA, then all you need to do is provide a binding to the generated component. However, CRA will only transform the SVG into a component if the import statement is written exactly a certain way, which isn't how BuckleScript outputs import statements. (There's a GitHub issue about it here.) You have to import it with raw JavaScript and then bind to the imported value:
%bs.raw
{|import {ReactComponent as _Logo} from "./logo.svg"|};
module Logo = {
[#react.component] [#bs.val] external make: unit => React.element = "_Logo";
};
/* And we can use it like a regular component: */
[#react.component]
let make = () =>
<div>
<Logo />
</div>;
According to the CRA docs:
The imported SVG React Component accepts a title prop along with other props that a svg element accepts.
For any of the other props you want to use, you'll have to add them to your external binding.
If you're not using CRA, then you'll need to configure your bundler to do the same transformation. I'm not familiar with the internals of CRA, but this seems to be the relevant code from its webpack configuration.
We can use SVGR to handle the webpack loading and then import the module as we normally would.
const webpack = require('webpack');
module.exports = {
entry: './src/index.js',
module: {
rules: [
//...
{
test: /\.svg$/,
use: ['#svgr/webpack'],
},
],
},
//...
};
module Logo = {
#bs.module(`../../../../src/img/logo.svg`) #react.component
external make: {.} => React.element = "default"
}
...
<Logo /> // works
source: https://blog.logrocket.com/how-to-use-svgs-in-react/
I am the author of another solution that doesn't involve webpack.
It's a tool that can transform your svg files directly into .re files: https://github.com/MoOx/react-from-svg
This can create files for react (dom) or react-native(-web) (=> files generated use react-native-svg).
Feel free to try it :)
For example you can do (when the tool is installed from npm)
$ react-from-svg src/SVGs src/SVGs/components --with-native-for-reason --remove-fill
This will turns the files from svg/SVGs into React components into src/SVGs/components compatible for React Native with the Reason syntax.
The last option remove all svg fill props so you can use them as icons.
Note that the generated components accept width, height & fill props so you can adjust them when used.
Last bonus: since webpack is not involved, you can use this transformation only when you update your SVGs files & use this code directly with a Node runtime (JSX from Reason gets removed when converted to JS so the code can be consumed directly via Node without any transformation - which can be handy for tiny static sites/pages).
Actually im "migrating" a website project where i used a template. There are some conflicts when i put the bootstrap link in the index.html. I would like to apply bootstrap just into one component to avoid this conflicts, but im not sure how to do it. Im pretty new with react.
The "conflicts" are just visual, like if importing bootstrap changes the rows and columns numbers
Unfortunately CSS is always global, so there's no easy way of doing this.
One way however, is to recompile Bootstrap and wrap it in a wrapper class.
Then, in your code, setup the wrapper class on a wrapper component and only classes that will be inside that wrapper component will be affected by Bootstrap classes.
Steps to do it :
(you'll need npm to do it)
download bootstrap sources here
unzip it, go in ./scss/bootstrap.scss
add a wrapper css class on all #import like so :
.local-bootstrap {
#import "function";
#import "variables";
/* ... */
#import "print";
}
go back to the root of the unzipped directory
run npm install and npm run css-compile
your local bootstrap is in ./dist/css/bootstrap.css, that's what you can add to your project
Then in your code :
<div class="local-bootstrap"> /* wrapper component */
/* inside, the code is affected by your local bootstrap */
<div class="alert alert-primary" role="alert"/>
</div>
/* outside it is not */
<div>
</div>
That said, it's pretty sure that the javascript part of bootstrap won't fully work because it relies on classes, this is a bit hacky, anyway.
If you're using SCSS, add the following to your SCSS file:
.local-bootstrap {
#import "~bootstrap/scss/bootstrap";
}
In your component file, make sure the SCSS file has been imported and then wrap the code you want to use bootstrap in a local-bootstrap classed div (see example).
Example:
import React from 'react';
import '<PATH TO SCSS FILE>';
const Example = () => {
return (
<div className='local-bootstrap'>
CODE YOU WANT TO USE BOOTSTRAP
</div>
);
};
You can use reactstrap, import what you need into your component file and leave the others alone.
Example:
import React from 'react';
import { Button } from 'reactstrap';
export default (props) => {
return (
<Button color="danger">Danger!</Button>
);
};
Using:
import 'bootstrap/dist/css/bootstrap.min.css';
You can import Bootstraps CSS into that specific component if you do not want it in your app.js or sitewide.
I am trying to generate static html from react using renderToStaticMarkup method. The problem I am facing right now is that I am not able to import css into react component. I want to import css in my React components like css-modules (import styles from './style.css'). And then inject that loaded css into generated static html head. How can I accomplish that?
P.S. I can't use webpack due to some constraints. If there is any babel plugin availabe for this specific case, then please let me know.
Here is how I am generating static html from react component:
const reactElement = require('react').createElement;
const ReactDomServer = require('react-dom/server');
const renderHTML = Component => {
return ReactDomServer.renderToString(reactElement(Component))
}
You can pass a URL in as a prop and render a <link/> tag. Made an example here, not sure if that would meet your needs or if you need it to be a style tag.
This may be challenging without a lot of custom logic.
If you want to inline the CSS only for the initial render and then fetch the rest after the initial render, styled-components may be a better option because it supports exactly what you're trying to achieve without too much configuration: https://www.styled-components.com/docs/advanced#server-side-rendering
May be I am too late you can also create It like this way.
React.createElement("style", {},[ "body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}" ])
Output:
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
Since createElement take 3 params and last one is children we can put our vanila css inside it as a children. You can put any imported file in the form of string and it will convert to style tag
Say I have a styled component, in index.jsx
import './index.less';
class Input extends React.Component {
...
}
and my index.less files looks:
.input{
color: #whiteColor;
}
This index.less has to work with the mixin.less that imported in the root project.
So my question is, even though I imported the mixin.less, it prompts variable #whiteColor not found. Any idea to solve this?
I have felt the same pain, why isn't my styled component resolving less variables?
The syntax is simple JavaScript, just do:
.input{
color: ${props => props.whiteColor};
// or
color: ${props => props.theme.whiteColor};
}
But, at my company, we had thousands of less components, and we really thought that the less syntax was cleaner and definitely faster to write. We developed Styless.
It is a babel plugin that parses less and generates javascript code. Add it to your .babelrc file.
{
"plugins": ["babel-plugin-styless"]
}
Then, we can do!!
const Input = styled.input`
#highlight: blue; // can be overwritten by theme or props
background: darken(#highlight, 5%); // make green darken by 5%
`;
Check here to see how to use the theme provider and load variable from your index.less!
You can try import the mixin.less in index.less
I have been trying the same than you.
But then I thought.. it is that what I really want? Because styled-components propose a different approach to having a modular structure for your styles.
https://www.styled-components.com/docs/advanced Check theming, is amazing powerful.
Because in styled components you define the variables with javascript.
And if you want color manipulation like less, sass, you can check https://github.com/erikras/styled-components-theme
Its like forgetting about less, and sass and moving it to a new style modules.
Still, if you want to keep your defined style classes, you can do that:
class MyComponent extends React.Component {
render() {
// Attach the passed-in className to the DOM node
return <div className={`some-global-class ${this.props.className}`} />;
}
}
Check the existing CSS usage from docs:
https://www.styled-components.com/docs/advanced#existing-css