I want to use antd Slider component in form.
So I put it the way shown in this sandbox
BUT
in sandbox - it works fine, and in my project - it's not visible.
Applying style={{display: ...}} or style={{height: ...}} didn't help.
Devtools show that elements with classnames ant-slider-rail, ant-slider-track have height:0
I'm out of ideas why that could happen?
I had the same issue. here is the solution
you should import the css file
import { Slider } from 'antd';
import 'antd/dist/antd.css';
Related
I tried to use of antd in my component but it can't load the correct style.
This is my code:
import { Calendar } from 'antd';
<Box sx={{width:350, height:350}}>
<Calendar fullscreen={true}/>
</Box>
This is its style in my component:
In my component
And this its correct component in the official document:
In doc
This is the link of official doc:https://ant.design/components/calendar/
Its look like stylesheet not imported.
Please follow the installation process
This should be work.
import 'antd/dist/antd.css'; // or antd/dist/antd.less
I created a project using electron react boilerplate
https://github.com/electron-react-boilerplate/electron-react-boilerplate
Everything works, but I decided to add antd (ant design)
yarn add antd
Then I import the antd styles
index.tsx
...
import "./styles/global.css";
import "./styles/fonts.css";
import "antd/dist/antd.css"
...
Next I used a button of type primary
some_component.tsx
import React from "react";
import s from './someComponent.module.scss'
import { Button } from "antd";
export const SomeComponent: React.FC = () => {
return <div className={s.root}>
<Button type={'primary'}> button text </Button>
</div>
}
But the style of the button remains the same (with standard styles)
I tried importing the component styles directly into my global.css, also tried adding to the component style, but that didn't change anything
#import "~antd/dist/antd.css";
I have looked into the following repository where it works, however I didn’t figure out how to add it to my project. I don't want to use this repository as it works crookedly and doesn't use typescript
Thanks!
you can add this import in App.global.css or create new one custom.global.scss
copy this line
#import '~antd/dist/antd.css';
then import this scss into your App.tsx
import './custom.global.scss';
This should work
I need to have a background image on my website. I tried using the img tag and this one does work but because I am trying to use Tailwind to have my image styled I would much prefer using the background tag.
This is my current component's code:
import React from 'react';
import Header from '../components/Header';
import houseImg from '../imgs/house-backg-orig.jpg'
import HomePageDescr from '../components/HomePageDescr'
function Home() {
return (
<div className="">
<Header/>
<div style={{ backgroundImage: `url('${houseImg}')` }} />
<HomePageDescr/>
</div>
);
}
export default Home;
Everything renders but the actual background. I tried looking at various things here but no questions/answers helped. Not adding require to the image, nothing.
Anyone encountered the same problem?
Thanks
You need to resize the div. Try setting height and width for the div
Now, I am stuck for several hours trying to make Storybook work with antd in my new React application (created with create-react-app), without success.
Whatever I do, Storybook does not take the styling of antd.
For example, I created a menu item with antd:
menuNav.tsx:
import React from "react";
import {Menu} from 'antd';
import "antd/dist/antd.less";
const MenuNav = () => {
return (
<Menu mode="horizontal">
<Menu.Item key="menu1">
This is my menu title
</Menu.Item>
</Menu>
)
}
export default MenuNav;
But the result looks like this, no styling at all, but a list:
And as you can see here, it understands that the menu is created by the UI library, but there is no antd styling applied:
This is the story file of MenuNav, 3-Menu.stories.js:
import React from "react";
import MenuNav from '../components/MenuNav';
export default {
title: "MenuNav",
component: MenuNav,
};
export const Text = () => <MenuNav></MenuNav>
I already tried to add a config.js inside ./storybook as suggested here, with no success. Furthermore, I tried adding a webpack.config.js in the same directory as recommended here, same result.
What am I doing wrong?
try adding #import '~antd/dist/antd.css'; to your applications main file, let say index.css which for example is placed in src folder and then add import '../src/index.css'; to .storybook/preview.js
`
I am new to React, I have some confusion related to CSS styling related to rwmc components.
I am just rendering two Button components on web page by importing it from '#rmwc/button' package. I am following this tutorial
https://jamesmfriedman.github.io/rmwc/buttons
I have also imported material design for this component like
import '#material/button/dist/mdc.button.css';
Now I have two buttons on my screens, for one of the button component, I have mentioned className property. In that class button color is just getting red which is working fine but I am wondering here, besides changing color of button, all other css defined in mdc.button.css are just getting applied to this as well, I don't know why is it happening so, Is this a correct behavior.
I am asking this because I have read here that
https://jamesmfriedman.github.io/rmwc/styling-theming
All of the components have the material-components-web classNames on them and you can add your own which means you are changing main class.
Any help will be appreciated.
Code:
import React from 'react';
import ReactDOM from 'react-dom';
import { DrawerHeader } from '#rmwc/drawer';
import { Button, ButtonIcon } from '#rmwc/button';
import '#material/button/dist/mdc.button.css';
//import styles from './index.module.css';
import './index.css'
const MyComponent = props => (
<div>
<Button>Default</Button>
<Button className="myDrawerHeader">Default2</Button>
</div>
);
ReactDOM.render(<MyComponent />, document.getElementById('root'));
index.css
.myDrawerHeader {
color: red !important;
}
Output on the screen is coming this which I think is wrong. Why all other styles from .mdc are getting applied to second button, I have just changed color of it.
screen-output-now
I think the behavior here is correct. Both the buttons have material-components-web css className and what you are doing is, adding another class to it. You are not actually changing the main class, you are extending the css styles of the second button using another class.
It behaves underneath as,
<button className="material-components-web">Default</button>
<button className="material-components-web myDrawerHeader">Default2</button>
I agree with Vishmi Money, the behavior is expected. When looking at the source code of the lib you used, its appeared a comment for classname props,
https://github.com/jamesmfriedman/rmwc/blob/master/src/button/index.js
/** Additional className for the button */
className?: string
So I think the idea is beside default classes you can define your own class and if you want to override some default behaviors then you can write it in your own class.