I'm currently porting an old MVC website with Razor pages.
I now want to use react with style compoents.
Now I am using react on the front end, I want to know what the best way to use the two things together.
For example how do I convert the classes on this div to use style components.
<div class="col-sm-6 col-md-4">
Do I just copy the bootstrap properties for those classes like this?
export const myDiv = styled.div`
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
flex: 0 0 33.33333%;
max-width: 33.33333%;`
Or is there a way to do something more like this:
export const myDiv = styled.div`
CLASS NAMES FROM BOOTSTRAP HERE: col-sm-6 col-md-4`
This is the first time using styled components so I'm not sure if this approach is anything like it should be.
Any ideas and explainations please?
I suggest using some libraries like react-bootstrap and using its components.
Other method (don't like it) is to import Bootstrap minified classes in html and use them inside components.
Then if you have to customize more or add styles that doesn't exists in Boostrap you can use Styled Components.
Copying the Bootstrap properties is long, potentially buggy and you lost the versioning of it.
If you want to start using react with styled-components which is a very good choice and you want to also include bootstrap I would recommend bootstrap-styled and also check out cssAPI from styled-components to create reusable css that you can inject in your components
Related
i am using bootstrap 5.2.3 in my react project.
i hvae imported
import "bootstrap/dist/css/bootstrap.min.css";
in index.js
it is working but in "nav-link" class
padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
font-size: var(--bs-nav-link-font-size);
font-weight: var(--bs-nav-link-font-weight);
all this attribute are shows as it is. it is not calculating padding, font-size, font-weight.. etc.
i did not getting why it is happening.
i have manually add bootstrap cdn in index.html it work fine all padding, font-size, font-weight.. etc are applied with proper value.
I am trying to import styles from a .css file into a react js file using "import '../css/banner.css', with css-loader and style-loader installed and enabled. It should be the most direct and simplest method to import css in react, but the styles just won't apply.
I am trying to achieve this without using other libraries like styled-components or jss.
banners.css:
.headerItem{
width: 20vw;
float: left;
background-color: cadetblue;
margin: auto;
padding: 3em;
text-align: center;
}
Header.js
import React ...
import '../css/banners.css'
class Header extends React.Component{
constructor(){
}
render(){
return (
<div className={"header"}>
<HeaderItem/> //shown as an example, has className of "headerItem"
</div>
)
}
}
The problem is not relevant to wrapping curly brackets around the class name or not. I found out that in my webpack.config.js I had set the modules option in "css-loader" to be true, which led to the css-loader looking for modules.css files instead of .css files. Changing the modules option to false solved my problem. (If you are using css modules then remember to set the flag to the correct value!)
As a matter of fact, arguments to be passed onto a React component should always be wrapped in curly brackets, and even if you don't the compiler will automatically add them for you since every argument is treated as an object, which would then be collected and passed as props down to the Child Component.
Apologies for raising such a trivial and wrongly-focused question.
Try this one. Dont use {} in className
<div className="headerItem">
<SomeChild/> //shown as an example
</div>
The best and simplest way to include CS into your react project is;
rename your file to [FileName].module.css
import it into your project using import importedStyles from './[FileName].module.css
use it by calling the imported name . the css style you want to use. eg importedStyles.bodyStyle
rename bannerss.css to banners.module.css:
.headerItem{
width: 20vw;
float: left;
background-color: cadetblue;
margin: auto;
padding: 3em;
text-align: center;
}
Header.js
Call the css file into your project and use;
import React ...
import bannerStyles '../css/banners.module.css'
class Header extends React.Component{
constructor(){
}
render(){
return (
<div className={"bannerStyles.header"}>
<HeaderItem/> //shown as an example, has className of "headerItem"
</div>
)
}
}
This should work fine and its easy.
Reference: https://www.w3schools.com/react/react_css.asp
Let me know if this works!
Dont use curly braces , or best you can use styled components to give css property
I want to override ant-tooltip-inner css class using Styled-Components.
Using normal import './Tooltip.css' everything works as intended.
// import './Tooltip.css'; // Overrides
const StyledLayout = styled.div`
// Doesn't Work
&.ant-tooltip-inner {
background-color: palevioletred !important;
color: white !important;
}
// Works on other CSS class
// default is light-blue - check Sidebar menu item in sandbox
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
background-color: purple;
}
`;
function CoolTooltip() {
return (
<StyledLayout>
...
</StyledLayout>
);
}
My goal is to override all tooltips coloring in my project (ant-tooltip-inner).
In this sandbox, all tooltips (of the Sidebar and Tooltip) need to be styled, uncommenting import "./tooltip.css"; will work.
Tooltips, Modal or similar components are rendered outside your SPA to improve the render performance of component tree.
Screenshot for same.
In your case you're trying to style a single instance of a component which will NOT work via local styling. You may refer to antd docs to do so or you may override it globally ( css file or any other way as docs say).
I already trying to override css of Modal from antd using styled-components, but still doesn't work as Kushalvm said above. I can override using pure CSS with className property from Modal.
See property API of antd Modal here --> https://ant.design/components/modal/
I am using styled components in my project.
Consider the following piece of code
import { Footer, FooterLeft, FooterRight, NavLink } from './footer_styles';
const FooterView = ({ prop }) => (
<Footer className="row">
<FooterLeft>
©Sample company, LLC
</FooterLeft>
<FooterRight>
<NavLink to="#" className="footer-link">Privacy Policy</NavLink>
<span className="separator"> | </span>
<NavLink to="#">Terms & Conditions</NavLink>
</FooterRight>
</Footer>
);
So i have the following questions.
1) Can i use bootstrap classes in styled components like what is shown in the code? Is this the correct approach? If not, how to use bootstrap styles along with styled components?
2) Do i need to create a component for each element in dom? For example, in the code that is shown, there is a span tag with class name "separator" for which the styles are added as follows
export const FooterRight = styled.div`
.separator {
float: left;
}
.footer-link {
margin-left: 0px;
}
`;
Is this approach correct? or
Do i need to create a separate component for separator?
I am a bit confused here. Any help would be appreciated.
You can use bootstrap class for style your component, it is nothing wrong. But it better if you use the React Bootstrap, library optimize for React. For example, the drop-down button you can use bootstrap class because it will use Jquery to execute the animation. But you shouldn't do it because Jquery manipulates the real DOM, React manipulate the virtual DOM so it is not good for performance.
You can read more here: https://reactjs.org/docs/integrating-with-other-libraries.html
The answer still yes, with the class to style the component, should use it to reduce the time for coding, with anything related to Jquery, just use the React Component.
I suggest you use the reactstrap, pretty similar to Bootstrap: https://reactstrap.github.io
Another thing, there is many ways to style component, but I am using CSS module, just need to create a CSS file with add-on module of the file name like this:
styleComponent.css --> styleComponent.module.css
And then import to your project:
import styles from './styleComponent.module.css'
And then you can style your component with normal css:
<div className={styles.separator} > Hello World </div>
In styleComponent.module.css:
.separator{
height: 20px;
background: black;
}
.separator:hover{
background: white;
}
It is more easy to manage your project because every single component it has a CSS file to go with it and the className is unique mean locally, Webpack will automatically convert the className 'separator' to '2djfas_separator' that will solve your problem with naming class in CSS.
Hope it helps a little bit for your project!!!
For a Quick demo purpose, i need to get the actual <style> balise from a page that already exist.
I know that this is not something to do, it's only for a demo.
I have a huge <style> balise to integer into a react app. I just want to copy paste in and make as little change as possible.
I've seen that :
<style>
{'\
div{\
background-color:red;\
}\
'}
</style>
from here : React JSX Style Tag Error on Render
is working but this need to edit all line of my balise and i don't
have the time for that.
I also tried this :
https://medium.learnreact.com/the-style-tag-and-react-24d6dd3ca974
But unfortunately it's not working :/
I'm looking for a quick solution where i only need to edit the beginning and the end of my <style> balise.
Thanks in advance to the community
You can use a template literal.
const CSS = `
div {
background: purple;
color: orange;
}
`;
const app = (
<div>
<style>{CSS}</style>
Hello, world!
</div>
);
ReactDOM.render(app, document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
I understand you have a non react project with its styles and you are making it react, but you want to keep the css. If that is the case, I recommend the following:
1 - get the original tag, place it to a css file, and import it into your project's base html, this way you still have your styles whitout doing anything to react
2 - get the original tag, place it into a css file, and import it using javascript/webpack
import styles from './styles.css'
3 - if you still want to place a style tag in react in a similar fashion, I recommend you placing all the style css using the character ` to define de string in the following way (ECMAScript 2015) (the character ` is not the same than ' and it lets you use several spaces and even variables inside. Defining a string like this is called a template literal):
render(){
let myCss = `
div{
background-color:red;
}
`;
return (<style>
{myCss}
</style>)
}
4 - using "styled components". They are designed to make it easier to use css in react. Although they are intented to style a component, you also can do acopy paste of a whole css style inside one of the components. So, as long as all your react elements are children of the specific styled component you are using, it will use those styles. So you can perfectly do the following:
const styled = require('styled-components'); // or import styled from "styled-components";
let Wrapper = styled.div`
div{
background-color:red;
}
`;
class MyReactProject extends React.Component {
/** your react code **/
render(){
return (
<Wrapper>
{ /* your react code */ }
</Wrapper>
)
}
/** your react code **/
}
using styled components you can do a quick fix for the moment, and it will be easy to do a full styled components migration in the future (you only have to transform each of the base tags of your react project into styled components)
link to styled components