我正在從事必須使用 Material UI 的專案，只是為了簡單起見，請考慮我有一個簡單的功能組件，其中有 2 個 Material UI 組件按鈕和文本欄位
import React from 'react';
import { Button, TextField } from '@material-ui/core';
function RenderComponent(){
return(
<>
<Button variant="contained">Contained</Button>
<TextField id="outlined-basic" label="Outlined" variant="outlined" />
</>
)
}
export default RenderComponent
誰能告訴我如何覆寫這兩個 Material UI 組件的 css 屬性。
謝謝??
uj5u.com熱心網友回復：
有幾種方法可以做到這一點，您可以使用匯入檔案中的類名直接覆寫MUI 組件的內置CSS 類CSS，例如，如果您想更改Button組件的樣式，您可以通過應用您需要的CSS要.MuiButton-root在“CSS”檔案上進行分類的屬性。像下面這樣。
.MuiButton-root{
color: white;
height: 20px;
padding: 10px;
}
您還可以使用可用props的組件，您可以在mui 站點的單獨檔案頁面中輕松找到它們。同樣，您可以使用makeStyles或styled來設定組件的樣式。這是makeStyles在您的Button組件中使用的示例。
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Button, TextField } from '@material-ui/core';
const useStyles = makeStyles({
root: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
border: 0,
borderRadius: 3,
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
color: 'white',
height: 48,
padding: '0 30px',
},
});
function RenderComponent(){
const classes = useStyles();
return(
<>
<Button className={classes.root} variant="contained">Contained</Button>
<TextField id="outlined-basic" label="Outlined" variant="outlined" />
</>
)
}
export default RenderComponent
您可以在此處找到有關樣式的更多資訊。
uj5u.com熱心網友回復：
給他們 id/classes 并為他們撰寫自定義 CSS。如果它沒有覆寫標準的 Material-UI 樣式，請添加關鍵字!important。如果你使用 create-react-app，你可以像這樣將 CSS 直接匯入到檔案中：
import "./styles.css";
如果這沒有幫助，那意味著 Material-UI 為元素使用行內樣式。在這種情況下，您必須將 CSS 直接寫入組件的屬性中：像這樣。如果它沒有覆寫標準樣式，請再次使用 !important。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/377807.html
上一篇：:hover僅一行帶有text-decoration:underline;
下一篇：關鍵幀沒有影片高度