iT邦幫忙

1

求助 CSS 修改

css

我網路上找的一個模組,想要加以應用
但是套進我的專案後卻沒有預期的效果
這是官方給的範例
codepen
而放到我的專案後.react-autosuggest__suggestion--focused卻沒有效果
我對CSS不太熟,找不出問題,想請教大大們指點明燈
CSS

body {
    font-family: Helvetica, sans-serif;
}

.react-autosuggest__container {
    position: relative;
}

.react-autosuggest__input {
    width: 240px;
    height: 30px;
    padding: 10px 20px;
    font-family: Helvetica, sans-serif;
    font-weight: 300;
    font-size: 16px;
    border: 1px solid #aaa;
    border-radius: 4px;
}

    .react-autosuggest__input:focus {
        outline: none;
    }

.react-autosuggest__container--open .react-autosuggest__input {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.react-autosuggest__suggestions-container {
    display: none;
}

.react-autosuggest__container--open .react-autosuggest__suggestions-container {
    display: block;
    position: absolute;
    top: 51px;
    width: 280px;
    border: 1px solid #aaa;
    background-color: #fff;
    font-family: Helvetica, sans-serif;
    font-weight: 300;
    font-size: 16px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    z-index: 2;
}

.react-autosuggest__suggestions-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.react-autosuggest__suggestion {
    cursor: pointer;
    padding: 10px 20px;
}

    .react-autosuggest__suggestion:not(:first-child) {
        border-top: 1px solid #ddd;
    }

.react-autosuggest__suggestion--focused {
    background-color: #0C7EAF;
    color: #fff;
}

.suggestion-content {
    display: flex;
    align-items: center;
    background-repeat: no-repeat;
}

.dancounsell {
    background-image: url(https://s3.amazonaws.com/uifaces/faces/twitter/dancounsell/48.jpg);
}

.ladylexy {
    background-image: url(https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/48.jpg);
}

.mtnmissy {
    background-image: url(https://s3.amazonaws.com/uifaces/faces/twitter/mtnmissy/48.jpg);
}

.steveodom {
    background-image: url(https://s3.amazonaws.com/uifaces/faces/twitter/steveodom/48.jpg);
}

.name {
    margin-left: 68px;
    line-height: 45px;
}

.highlight {
    color: #ee0000;
    font-weight: bold;
}

.react-autosuggest__suggestion--focused .highlight {
    color: #120000;
}

JS

import React, { Component } from 'react';
import AutosuggestHighlightMatch from 'autosuggest-highlight/match';
import AutosuggestHighlightParse from 'autosuggest-highlight/parse';
import Autosuggest from 'react-autosuggest';
import './cust.css';

const people = [
    {
        first: 'Charlie',
        last: 'Brown',
        twitter: 'dancounsell'
    },
    {
        first: 'Charlotte',
        last: 'White',
        twitter: 'mtnmissy'
    },
    {
        first: 'Chloe',
        last: 'Jones',
        twitter: 'ladylexy'
    },
    {
        first: 'Cooper',
        last: 'King',
        twitter: 'steveodom'
    }
];

function escapeRegexCharacters(str) {
    return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

function getSuggestions(value) {
    const escapedValue = escapeRegexCharacters(value.trim());

    if (escapedValue === '') {
        return [];
    }

    const regex = new RegExp('\\b' + escapedValue, 'i');

    return people.filter(person => regex.test(getSuggestionValue(person)));
}

function getSuggestionValue(suggestion) {
    return `${suggestion.first} ${suggestion.last}`;
}

function renderSuggestion(suggestion, { query }) {
    const suggestionText = `${suggestion.first} ${suggestion.last}`;
    const matches = AutosuggestHighlightMatch(suggestionText, query);
    const parts = AutosuggestHighlightParse(suggestionText, matches);

    return (
        <span className={'suggestion-content ' + suggestion.twitter}>
            <span className="name">
                {
                    parts.map((part, index) => {
                        const className = part.highlight ? 'highlight' : null;

                        return (
                            <span className={className} key={index}>{part.text}</span>
                        );
                    })
                }
            </span>
        </span>
    );
}

class CustomRender extends React.Component {
    constructor() {
        super();

        this.state = {
            value: '',
            suggestions: []
        };
    }

    onChange = (event, { newValue, method }) => {
        this.setState({
            value: newValue
        });
    };

    onSuggestionsFetchRequested = ({ value }) => {
        this.setState({
            suggestions: getSuggestions(value)
        });
    };

    onSuggestionsClearRequested = () => {
        this.setState({
            suggestions: []
        });
    };

    render() {
        const { value, suggestions } = this.state;
        const inputProps = {
            placeholder: "Type 'c'",
            value,
            onChange: this.onChange
        };

        return (
            <Autosuggest
                suggestions={suggestions}
                onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
                onSuggestionsClearRequested={this.onSuggestionsClearRequested}
                getSuggestionValue={getSuggestionValue}
                renderSuggestion={renderSuggestion}
                inputProps={inputProps} />
        );
    }
}

export default CustomRender;

2 個回答

0
dragonH
iT邦超人 5 級 ‧ 2019-11-05 16:45:00
最佳解答

你應該要貼你寫的 code

因為這範例我怎麼測都沒問題 /images/emoticon/emoticon13.gif

看更多先前的回應...收起先前的回應...
sion iT邦新手 4 級 ‧ 2019-11-05 17:06:02 檢舉

我整個照摳下來的哈哈哈
完全沒改
因為codepen沒有import
所以我也搞不清楚問題是出在哪部分
dragonH大 可以試試不用codepen
我遇到的情況就是離開codepen後就不能用了

dragonH iT邦超人 5 級 ‧ 2019-11-05 17:10:05 檢舉

不一定要貼 codepen 阿

純 code 也可以

所以我也搞不清楚問題是出在哪部分

先看 console 有沒問題吧

另外

沒有預期效果

那實際效果是?

沒變色嗎

sion iT邦新手 4 級 ‧ 2019-11-05 17:11:58 檢舉

沒變色

sion iT邦新手 4 級 ‧ 2019-11-05 17:16:44 檢舉

我的code真的是copy paste的

Zed_Yang iT邦新手 3 級 ‧ 2019-11-05 18:07:22 檢舉

那觀看的瀏覽器是??

dragonH iT邦超人 5 級 ‧ 2019-11-05 18:44:21 檢舉

sion

應該是版本的問題

npm 載下來的最新版

hover 的 class name 是

react-autosuggest__suggestion--highlighted

把原本的 css 改成

.react-autosuggest__suggestion--highlighted {
  background-color: #0C7EAF;
  color: #fff;
}

就是你要的了

已實測過 /images/emoticon/emoticon42.gif

最新版的 codepen

sion iT邦新手 4 級 ‧ 2019-11-06 09:33:15 檢舉

可以了

npm 載下來的最新版

是在git上看的嗎?
/images/emoticon/emoticon33.gif

dragonH iT邦超人 5 級 ‧ 2019-11-06 09:48:35 檢舉

sion

沒阿

直接下斷點看的

/images/emoticon/emoticon12.gif

0
Zed_Yang
iT邦新手 3 級 ‧ 2019-11-05 17:09:35

在你CCS最前面貼上這段試試?

這段是用來初始化CCS
因為不同瀏覽器在一開始CCS就不一樣了
不知道是否是這個原因會有影響

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
Zed_Yang iT邦新手 3 級 ‧ 2019-11-05 17:11:35 檢舉

若還是不能
建議還是連同您的code貼上來比較好知道問題
(該不會連html的部分都相同吧?)

sion iT邦新手 4 級 ‧ 2019-11-05 17:16:04 檢舉

這個沒有用唷

我要發表回答

立即登入回答