如何將自定義CSS應用於模式對話框 - React-bootstrap

我是新來的React這裏，我嘗試將CSS應用到模態對話框。如何將自定義CSS應用於模式對話框 - React-bootstrap

我已經創建了一個CSS文件：/css/mycss.css

/css/mycss.css

.test { 
    width: 90%; 
    color: red; 
}

在根級別，我有我的模態對話框JSX文件：

MyModal.jsx

//more code above 
<Modal 
    {...this.props} 
    show={this.state.show} 
    onHide={this.hideModal} 
    dialogClassName="test" 
> 
//more code below

據我所知，我應該使用dialogClassName prop來將CSS應用到模態對話框。我試圖訪問我的CSS文件中的類選擇器，並將其傳遞到prop，如圖所示。

我必須導入CSS嗎？

import test from '/css/mycss.css';

這沒有奏效。我該如何獲得CSS才能顯示？

編輯：

我已經試過

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';

沒有任何適用的CSS。

編輯2：

我試圖再次import styles from './css/mycss.css'，然後做dialogClassName = {styles.test};。這實際上工作...但有點。文字顏色確實變爲紅色，但模態對話框的寬度仍然相當滯後。無論我將width屬性更改爲什麼，它都不是屏幕的90％或屏幕的10％。首先，爲什麼我接下來的教程告訴我要傳遞一個字符串到dialogClassName？我怎樣才能讓模態對話框的寬度改變？

來源

2016-11-19 noblerare

是的，你必須導入該css文件;） – Mardzis

@Mardzis我不知道如何正確地做到這一點。我嘗試了我在帖子中寫過的內容。我也嘗試從'/ css/mycss.css''導入{test}並從'/ css/mycss.css'中導入.test，並從'/ css/mycss.css'中導入{.test} 。他們都沒有工作。 – noblerare

回覆：關於你的*編輯2 *的問題，在CSS上導入是由webpack css-loader完成和解析的，它將css保存到對象中，這就是爲什麼你需要在'dialogClassName'上使用變量的原因。 – jpdelatorre

你說你使用的是webpack。如果您沒有安裝css loader。

npm install css-loader --save-dev

現在您可以在React組件中導入您的部分CSS文件。這個例子是當你有一個js文件的方向相同的CSS文件。

import componentStyle from './componentStyle.scss';

還有更多的方法來導入css文件。我使用這個，因爲你可以像這樣進入文件：className={componentStyle.classInside}。

的WebPack例如：

module.exports = { 
    module: { 
    loaders: [ 
     { test: /\.css$/, loader: "style-loader!css-loader" } 
    ] 
    } 
};

此外，您還可以以同樣的方式使用SASS，LESS等等。

來源

2016-11-19 20:55:58 Mardzis

是的，我有webpack，我顯然已經安裝了'css-loader'，所以我只需要你的答案的中間部分，以使其工作。謝謝！ – noblerare

嘗試import './css/mycss.css';

路徑應該是相對於該文件。

來源

2016-11-19 19:44:40 jpdelatorre

這沒有奏效。在'dialogClassName'中，我是否簡單地將我想要應用的類的名稱（在我的情況下是'test'）？路徑是正確的。 – noblerare

你是否使用任何捆綁軟件，如webpack？另一種選擇是隻在你的'index.html'文件中導入css文件。 – jpdelatorre

我正在使用'webpack'。好吧，所以我嘗試了一些新的東西，它「有點」起作用。編輯我的原始帖子。 – noblerare

如何將自定義CSS應用於模式對話框 - React-bootstrap

回答

相關問題