使用redux時CSS元素不起作用

有一個使用 react js 和 redux 的簡單筆記應用程式

我有一個帶有 css 屬性的記事卡組件：

NoteItem.js

const NoteItem = ({ text, date, index }) => {
  const dispatch = useDispatch();

  const deleteNoteItem = () => {
    dispatch(deleteNote(index));
  };

  return (
    <div className={"note"}>
      <span>{text}</span>
      <div className="note-footer">
        <small>{date}</small>
        <MdDeleteForever
          className={"delete-icon"}
          size={"1.3em"}
          onClick={deleteNoteItem}
        />
      </div>
    </div>
  );
};

CSS 屬性

@import url('https://fonts.googleapis.com/css2?family=M PLUS 2&display=swap');

body {
  margin: 0;
  font-family: 'M PLUS 2', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
  monospace;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dark-mode {
  background-color: black;
}

.dark-mode h1 {
  color: white;
}

.container {
  max-width: 960px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
  min-height: 100vh;
}

.notes-list {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(
        auto-fill,
    minmax(250px, 1fr)
    );
}

.note.new {
  background-color: #67d7cc;
}

textarea {
  border: none;
  resize: none;
  background-color: #67d7cc;
}

textarea:focus {
  outline: none;
}

.save {
  background-color: #e1e1e1;
  border: none;
  border-radius: 15px;
  padding: 5px 10px 5px 10px;
}

.save:hover {
  background-color: #ededed;
  cursor: pointer;
}

.note {
  background-color: #fef68a;
  border-radius: 10px;
  padding: 1rem;
  min-height: 170px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  white-space: pre-wrap;
}

.note-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.delete-icon {
  cursor: pointer;
}

.search {
  display: flex;
  align-items: center;
  background-color: rgb(233, 233, 233);
  border-radius: 10px;
  padding: 5px;
  margin-bottom: 1.5em;
}

.search input {
  border: none;
  background-color: rgb(233, 233, 233);
  width: 100%;
}

.search input:focus {
  outline: none;
}

NewItem.js

  const NewItem = () => {
    const [input, setInput] = useState("");

    const dispatch = useDispatch();

    const getCurrentDate = () => {
      const date = new Date();
      return `${date.getDate()}-${
        date.getMonth()   1
      }-${date.getFullYear()}  ${date.getHours()}:${date.getMinutes()}`;
    };

    const add = () => {
      dispatch(
        addNote({
          text: input,
          date: getCurrentDate()
        })
      );

      setInput("")
    };

    return (
      <div className={"note new"}>
        <textarea
          rows={"8"}
          cols={"10"}
          placeholder={"Type to add a note..."}
          value={input}
          onChange={(e) => setInput(e.target.value)}
        />
        <div className={"note-footer"}>
          <small>{200 - input.length} remaining</small>
          <button className="save" onClick={add}>
            Save
          </button>
        </div>
      </div>
    );
};

如果我在卡片組件中對 span 標簽中的文本進行硬編碼，卡片看起來應該是

但是，如果我將創建新卡的邏輯集成到 redux 組件中，那么該卡將以這種方式呈現：

可能是什么問題呢？我在這里沒有找到類似的東西。提前致謝！

uj5u.com熱心網友回復：

這就是一個沒有空格的長字串在<span>. 添加空格，它也將有助于 css 屬性word-break：https : //developer.mozilla.org/en-US/docs/Web/CSS/word-break

uj5u.com熱心網友回復：

您的筆記會span自動在空格處中斷以避免溢位。您似乎沒有在第二個示例中放置任何空格，從而導致溢位。

無論如何，要在跨度的邊緣中斷，請將 css 屬性添加overflow-wrap: break-word;到您的筆記類。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text/Wrapping_Text#breaking_long_words

這是我在https://jsfiddle.net/febargph/ 中測驗更改的小提琴

標籤：javascript css 反应 还原 redux-工具包

上一篇：JavaScript：為什么輸出是假的？[復制]

下一篇：將物件陣列中的多個特定屬性過濾到新陣列中