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.
Related
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
I am trying to import a component from an external project into my storybook. I imported it, for example, a custom Button, but the style is not being rendered, it shows only the default html button style and not my styled-component.
I also tried importing it in .storybook/preview.js like the other scss files and bootstrap library, but still, the styled-components style is not being rendered.
import Button from "..filelocation"
For storybook you can make a global (storybook folder) css style by making a .storybook/preview-head.html file and adding your css there via css. source: https://storybook.js.org/docs/react/configure/styling-and-css
However you can also just add a styles.css inside your storybook component and call it with import './styles.css';
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!!!