I am new to React here and I am trying to apply CSS to a Modal dialog.
I've created a css file: /css/mycss.css
/css/mycss.css
.test {
width: 90%;
color: red;
}
At the root level, I have my modal dialog JSX file:
MyModal.jsx
//more code above
<Modal
{...this.props}
show={this.state.show}
onHide={this.hideModal}
dialogClassName="test"
>
//more code below
As I understand it, I'm supposed to use the dialogClassName prop to apply CSS to the modal dialog. I'm trying to access the class selector in my CSS file and pass it into the prop as shown.
Do I have to import the CSS?
import test from '/css/mycss.css';
That didn't work. What do I do to get the CSS to show?
Edit:
I've tried
import styles from './css/mycss.css'; // dialogClassName='styles.test';
import { test } from './css/mycss.css'; // dialogClassName='test';
import .test from './css/mycss.css'; // dialogClassName='test';
import {.test} from './css/mycss.css'; // dialogClassName='.test';
import './css/mycss.css'; // dialogClassName='test';
None of that applies the CSS.
Edit 2:
I tried import styles from './css/mycss.css' again and then did dialogClassName = {styles.test};. That actually worked...but sort of. The text colors did change to red but the width of the Modal dialog is still pretty stagnant. It is not 90% of the screen or 10% of the screen no matter what I change the width attribute to. So first, why was the tutorial I was following telling me to pass a string to dialogClassName? And how do I get the width of the modal dialog to change?
You said that you are using webpack. If you don't have installed css loader.
npm install css-loader --save-dev
Now you can import your partial CSS files in React components. This example is when you have CSS files in the same direction as a js file.
import componentStyle from './componentStyle.scss';
There are more way how to import css files. This I use because you can go inside the file like this: className={componentStyle.classInside}.
Webpack example:
module.exports = {
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
}
};
Also, you can use SASS, LESS, etc. in the same way.
Try import './css/mycss.css';
Path should be relative to the file.
In .js file
import classes from './style.css';
dialogClassName= {classes.myModalStyle} as Modal attribute
In style.css
.myModalStyle{
width: 90%,
max-width: none!important;
}
Note: max-width: none!important is the most important part. Without it, resizing the width won't work
Related
How can I import the content of .scss file as a CSS string in Next.js?
I need something like this:
// scss file
.bg-red {
background-color: red;
}
Use the content as variable:
let styleString =
.bg-red {
background-color: red;
}
And inject it to iframe (I'm using react-frame-component library)
<Frame head={
<style>{styleString}</style>
}>
</Frame>
I need something like this but for scss instead of styled-components:
Styled components are not rendering in React Iframe?
I think this might be what I'm looking for, but don't want to modify webpack config as much as possible.
https://www.npmjs.com/package/sass-to-string
I'm trying to use Mantine and Tailwind together, however Tailwind's "preflight" base styles are overriding Mantine's resulting in a simple button being invisible.
You can disable preflight:
corePlugins: {
preflight: true
}
But I'd rather keep it enabled and load Mantine CSS after, per this suggestion.
Is there any way to specify order for this?
Create an Emotion cache using createEmotionCache from Mantine core, and set prepend to false. Then, call it inside MantineProvider's emotionCache prop:
import {
MantineProvider,
createEmotionCache
} from '#mantine/core';
const myCache = createEmotionCache({
key: 'mantine',
prepend: false
});
<MantineProvider emotionCache={myCache}>{children}</MantineProvider>
Two steps:
Add preflight: false in tailwind.config.js to disable the default
Copy out https://unpkg.com/tailwindcss#3.2.4/src/css/preflight.css refereed by https://tailwindcss.com/docs/preflight and import it in your entry point
So, in your global stylesheet where you imported the tailwind styles remove the base styles as they will override some mantine styles. It should look like this
#tailwind components;
#tailwind utilities;
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.
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